Back to Documentation
    Integration Guide

    Widget Deployment for Webflow

    This guide is for Webflow sites on a Basic plan or higher, using the Webflow Designer, with an active LastBot ONE account and a configured bot. Custom Code requires a paid site plan, it is not available on the free Starter plan.

    Before you begin

    • •An active LastBot ONE account with a published bot
    • •A Webflow site on a Basic plan or higher
    • •Access to the Webflow Designer, not just the Editor
    • •Permission to edit Site Settings and Page Settings

    How the widget works on Webflow

    • Widgets are added through Webflow Custom Code fields: Site Settings loads on every page, Page Settings loads on a specific page only.
    • Popup widget: a floating chat bubble visitors click to open.
    • Embedded widget: placed inside a specific area of your page, always visible with no open or close button.

    Part 1: Popup widget

    The popup widget appears as a floating chat button in the corner of your page.

    1

    Get your embed code from LastBot Hub

    • Log in to your LastBot Hub and open your bot.
    • Click Publish in the top-right corner.
    • The "Let's go live!" dialog opens. Select Popup widget.
    2

    Configure the widget

    Under Step 1: Configure Widget Settings in the Hub.

    • Auto Open: toggle on to open the chat automatically when a visitor loads the page.
    • Full Screen: toggle on to expand the chat to the full browser window.
    • The embed code updates automatically as you change these settings.
    3

    Copy the code

    • Under Step 2: Copy and Paste the Generated Code, click Copy.
    4

    Add the code to Webflow

    Option A covers all pages, Option B covers selected pages.

    • Option A: open the Webflow Designer, go to Site Settings, Custom Code, scroll to the Footer Code section, paste your code, and click Save Changes.
    • Option B: click the Pages icon in the left sidebar, click the gear icon next to the page, scroll to the Before </body> tag field, paste your code, and click Save Changes.
    • Repeat Option B for each page where the popup should appear.
    Use Option B when you want the popup on most pages but not all, for example when one page uses the embedded widget instead.
    5

    Publish and verify

    • Click Publish in the top-right corner of the Webflow Designer and publish to your domain.
    • Open your live website URL in a private browser window.
    • The chat button should appear in the bottom corner of the page.
    • Click it and send a test message to confirm the bot responds.
    The widget does not appear in the Webflow Designer canvas or preview mode. Always verify on the live published URL.

    Part 2: Embedded widget

    The embedded widget is placed inside a specific section of your Webflow page. Method A puts it at the bottom of the page, Method B lets you position it anywhere.

    1

    Get and configure the embed code

    • Log in to LastBot Hub, open your bot, click Publish, and select Embedded widget.
    • Maximum height: the maximum height the widget grows to before scrolling internally. Default is 600px.
    • Avatar and welcome message: choose Normal, Small, or Hidden.
    • Hide avatar and welcome message after the first message: tick this to give more space to the conversation.
    • Under Step 2, select HTML as the framework, then click Copy below the code block.
    2

    Method A: widget at the bottom of the page

    Simpler option, no work is needed in the Webflow Designer canvas.

    • In the Webflow Designer, click the Pages icon in the left sidebar.
    • Click the gear icon next to the page where the widget should appear.
    • Scroll to the Before </body> tag field and paste the complete copied code.
    • Click Save Changes.
    3

    Method B: widget positioned anywhere on the page

    Use this when the widget should sit inside a specific section, for example above the footer.

    • In the Designer, open the target page and choose or add the section where the widget should sit.
    • From the Add panel, Advanced, drag the Code Embed element into that section. The code editor opens automatically.
    • Paste everything after the first line of your copied code into the Code Embed editor, that is everything except the script tag. Click Save & Close.
    • Open the Navigator and confirm Code Embed sits directly inside a Section or Container, not nested inside a content block.
    • Click the Pages icon, open Page Settings for that page, and paste only the first line, the script tag, into the Before </body> tag field. Click Save Changes.
    If the Code Embed is nested too deep, the widget will not display correctly. Drag it in the Navigator until it sits directly inside a Section or Container.
    4

    Control the widget width (optional)

    The widget may stretch to full page width. Add this CSS in Site Settings, Custom Code, Head Code.

    • Open Site Settings, Custom Code, and find the Head Code field labelled inside <head> tag.
    • Add the CSS below and click Save Changes.
    • Change 680px to any width that fits your page. Remove auto from the margin for left alignment.
    <style>
  div[data-lastbot] {
    max-width: 680px;
    margin: 2rem auto;
  }
</style>
    5

    Publish and verify

    • Click Publish in the Webflow Designer and publish to your domain.
    • Open the live page URL in a private browser window.
    • The chat widget should appear where you placed it.
    • Send a test message to confirm the bot responds.
    The widget does not appear in the Webflow canvas, preview mode, or the Designer.

    Troubleshooting: popup widget

    • Confirm you clicked Publish after adding the Custom Code. Saving in the Designer does not make changes live.
    • Open the live URL in a private browser window to avoid cached versions.
    • Verify your Webflow site plan supports Custom Code, Basic plan or higher is required.
    • If using Site Settings, confirm the code is in Footer Code, not Head Code.
    • If using Page Settings, confirm the code is in Before </body> tag, not Before </head> tag.
    • Temporarily disable ad blockers or privacy extensions and reload.

    Troubleshooting: embedded widget

    • Confirm you published after saving your changes.
    • Open the live URL in a private browser window, the widget never renders in the Designer.
    • Confirm you selected HTML as the framework in the Hub.
    • If using Method B, confirm the script tag is in Page Settings, Before </body> tag. Without it the widget will not load.
    • If using Method B, confirm the Code Embed sits directly inside a Section or Container.
    • If the widget area appears blank, check that the surrounding section has enough height.
    • Temporarily disable ad blockers or privacy extensions and reload.

    Limitations

    • •Free Starter plan users: Custom Code is not available. Upgrade to a Basic site plan or higher.
    • •This guide requires the Webflow Designer. Editor-only access cannot reach Site Settings, Page Settings, or Custom Code.
    • •The widget only appears on the live published site, not in the canvas or preview mode.
    • •Method B requires the Code Embed element to sit directly inside a Section or Container.
    • •Some ad blockers and privacy extensions can prevent the widget from loading.

    Need help?

    Contact your LastBot account manager or reach out to our support team.

    Contact Supportsupport@lastbot.com