Skip to content

Growth: Lead Forms & Phone Capture Widgets

Lead Forms in Abelo are embeddable widgets designed to convert website visitors into subscribers by capturing verified mobile phone numbers and promotional marketing consent in real time.

Universal Compatibility

Lead Forms are standalone and can be embedded into any website or web application (Shopify, WooCommerce, WordPress, Webflow, Squarespace, Wix, or custom React/Vue/HTML websites). An ecommerce integration is not required to use Growth widgets.

How Lead Forms Work

graph LR
    A["1. Visitor Arrives<br/><small>On Any Website</small>"] --> B["2. Trigger Fires<br/><small>Delay, Scroll, or Exit Intent</small>"]
    B --> C["3. Form Displayed<br/><small>Phone + Consent Checkbox</small>"]
    C --> D["4. Instant Ingestion<br/><small>Profile created with opt-in</small>"]
  1. Visitor Engagement: A visitor is presented with an engaging popup or banner offering an incentive (e.g. "Join our VIP club for 10% off your first order").
  2. Explicit Opt-in Consent: The form includes real-time E.164 phone validation and explicit promotional consent confirmation compliant with GDPR and carrier regulations.
  3. Instant Profile Creation: Once submitted, Abelo automatically creates a customer profile in your organization's Audience > Profiles with sms_consent or viber_consent enabled.
  4. Instant Welcome Trigger: You can immediately trigger a welcome notification via an active API Campaign.
Screenshot Placeholder Storefront Lead Capture Popup Screenshot showing an active lead capture popup modal rendered on a live website with phone number field and consent checkbox.

4-Step Form Creation Workflow

In the Abelo CMS under Growth > Lead Forms > Create Form, you configure your form using a 4-step wizard:

graph TD
    Step1["Step 1: Basic Setup<br/><small>Form name, layout type, styling</small>"] --> Step2["Step 2: Content<br/><small>Headlines, discount code, consent text</small>"]
    Step2 --> Step3["Step 3: Trigger Rules<br/><small>Timing, scroll depth, exit intent, URLs</small>"]
    Step3 --> Step4["Step 4: Review & Embed<br/><small>Live preview & installation script</small>"]

Step 1: Basic Setup

  • Form Name: Internal identifier for analytics and reporting.
  • Layout & Position: Center popup modal, floating slide-in banner, or bottom drawer.
  • Brand Styling: Custom brand primary color, background surface, and typography matching your website.

Step 2: Content & Copy

  • Headline & Body Text: Engaging copy highlighting your promotional offer.
  • Input Fields: Mobile phone input with automatic country prefix selector and optional email capture.
  • Consent Disclaimer: Clear GDPR/carrier compliance statement (e.g. "By subscribing, you agree to receive promotional messages from [Your Brand]").
  • Success Screen: Confirmation message displaying a revealed coupon code or welcome notice.

Step 3: Trigger Rules

Define precisely when and where the form appears to visitors:

Trigger Description Recommended Setting
Time Delay Shows after the visitor spends \(N\) seconds on the page. 5 – 10 seconds
Scroll Depth Shows when the visitor scrolls past \(N\%\) of page height. 30% – 50%
Exit Intent Detects mouse trajectory moving toward tab close/back buttons (Desktop). On exit attempt
URL Targeting Restrict display to specific URL paths (e.g. /shop/* or homepage only). All pages or specific paths

Step 4: Review & Publish

Preview the desktop and mobile rendering, set the form status to Active, and obtain your installation snippet.

Screenshot Placeholder Lead Form Customizer & Trigger Settings Screenshot of the Abelo Growth Form Editor showing trigger rules (Time Delay, Scroll Depth, Exit Intent) and real-time form preview.

Installing the Embed Script on Any Website

To activate the form on your website, copy your organization's script tag from the CMS and paste it immediately before the closing </body> tag of your website template:

<!-- Abelo Lead Capture Widget -->
<script 
  src="https://cdn.abelo.ai/widgets/v1/loader.js" 
  data-abelo-org="YOUR_ORGANIZATION_UID"
  data-abelo-widget="YOUR_WIDGET_UID"
  async>
</script>

Installation Guides by Platform

  • Custom HTML / Single-Page Apps (React, Vue, Next.js, Nuxt): Add the <script> tag to your root index.html or app.vue / _document.tsx.
  • Shopify: Paste the script snippet into theme.liquid right above </body>, or inject via a Shopify Script Tag.
  • WooCommerce / WordPress: Paste the snippet into your theme's footer.php or use a header/footer injection plugin.
  • Webflow / Squarespace / Wix: Paste the snippet into Site Settings > Custom Code > Footer Code.

Security & Anti-Abuse Protection

  • E.164 Phone Syntax Validation: Validates international dial codes and formatting in real time to prevent typos.
  • IP Rate Limiting & Bot Protection: Automated anti-spam throttling prevents malicious form submissions.
  • Audit Logging: Every lead capture event logs the timestamp, IP, and agreed consent text for compliance verification.