The Webflow integration connects your Velaro chat widget to your Webflow site and monitors form submissions so your bot can engage visitors in real time.

What the Webflow Integration Does

Velaro connects to your Webflow site via the Webflow API. Once connected, you can install the Velaro chat widget on every page of your site with one click — no code changes required. Velaro also monitors your Webflow form submissions and triggers workflows automatically when a visitor submits a form.

How to Connect

1. Go to Settings → Integrations → Webflow.

2. Paste your Webflow API token. To get a token, open Webflow → Account Settings → API Access → Generate Token.

3. Select your Webflow site from the dropdown.

4. Click Install Widget.

Your Webflow site must be published before the widget will appear. The widget is injected into all pages automatically — you do not need to add embed code to individual pages or templates.

Installing the Widget

After you click Install Widget, Velaro adds the chat widget script to your site's custom code footer. Publish your site in Webflow after connecting to make the widget go live. If you republish your site later, the widget persists automatically — Velaro stores the embed in your site-level custom code, not in individual page settings.

Form Submission Triggers

When a visitor submits any Webflow form, Velaro fires a Form Submitted workflow event. You can use this event to:

• Start a workflow that sends a follow-up chat message to the visitor
• Route the conversation to a specific team
• Create a CRM contact from the form data
• Tag the conversation with the form name

To set this up, go to Workflows → New Workflow → Trigger: Form Submitted.

What the AI Bot Can Do

When a visitor submits a Webflow form, your bot can:

• Greet the visitor by name using fields from the form submission
• Answer questions about next steps (e.g., "Someone from our team will reach out within 24 hours")
• Collect additional details not captured in the form
• Transfer to a live agent if the visitor has urgent questions

Common Use Cases

Widget Load Behavior (Optional)

Two optional settings, both off by default, control exactly when and how the widget loads on

your Webflow site. Find them under Settings > Integrations > Webflow > Load Settings on the

connection you want to adjust.

Defer widget load delays the widget script until either N seconds have passed or the visitor

scrolls or clicks, whichever happens first. This can improve page-load performance scores

(Lighthouse/PageSpeed) since the widget script no longer competes with your page's initial load.

Leave at 0 (the default) for the widget to load immediately, exactly as it always has.

Require cookie consent waits for your cookie-consent tool to fire a

consent-granted browser event before the widget initializes, so the widget never renders ahead

of a visitor's consent decision. Leave off (the default) if you do not need this, and the widget

behaves exactly as it always has.

If you use a consent management platform, fire the event from your platform's callback. For

example, with OneTrust:

<script>
  window.OneTrust.OnConsentChanged(function () {
    if (window.OnetrustActiveGroups && window.OnetrustActiveGroups.indexOf(',C0002,') > -1) {
      window.dispatchEvent(new Event('consent-granted'));
    }
  });
</script>

Or with Cookiebot:

<script>
  window.addEventListener('CookiebotOnAccept', function () {
    if (Cookiebot.consent.statistics || Cookiebot.consent.marketing) {
      window.dispatchEvent(new Event('consent-granted'));
    }
  });
</script>

Add whichever snippet matches your consent platform to your site's custom code, and enable

Require cookie consent on the Webflow connection in Velaro.

Troubleshooting

Widget is not showing on the site

Confirm your Webflow site is published after the integration was connected. Open Webflow → Site Settings → Custom Code and verify the Velaro script tag appears in the Footer Code section.

Form submissions are not triggering workflows

Check that the workflow trigger is set to Form Submitted and that the workflow is active (not paused). Also confirm the Webflow API token has read access to your site's forms. Tokens with project-level scope may not include form data — use an account-level token if in doubt.

Widget appears but does not load

Check your Webflow site's Content Security Policy settings. If you have a custom CSP header, add app-cdn.velaro.com to the allowed script sources.

API token error on connect

Webflow API tokens are site-specific or account-level. If you see an authentication error, regenerate the token in Webflow → Account Settings → API Access and paste the new value in Velaro.