Back to Documentation
    Integration Guide

    Widget Deployment for GoDaddy Airo

    This guide is for GoDaddy Airo Beta websites with access to the code editor, with an active LastBot ONE account and a configured bot. GoDaddy Airo is a React single page app, all pages share one index.html, so the popup widget appears on every page of your site.

    Before you begin

    • •An active LastBot ONE account with a published bot
    • •A GoDaddy Airo Beta website
    • •Access to the GoDaddy Airo code editor

    How the widget works on GoDaddy Airo

    • Widgets are added by editing source files directly in the GoDaddy Airo code editor.
    • To open the code editor, click the + button in the top navigation bar, then select Code.
    • Popup widget: added to index.html once, so it appears on all pages of your site.
    • Embedded widget: requires editing the LastBotEmbeddedWidget.tsx source file and adding the component to your target page.

    Part 1: Popup widget

    The popup widget appears as a floating chat button in the corner of every 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 GoDaddy Airo

    • In GoDaddy Airo, click + and then Code to open the code editor.
    • In the file tree, open index.html.
    • Locate the closing </body> tag near the bottom of the file.
    • Paste your copied code directly before </body>, then click Save.
    All pages share one index.html, so the popup widget will appear on every page of your site.
    5

    Publish and verify

    • Click Publish in GoDaddy Airo.
    • Open the live site URL in a private browser window.
    • The chat button should appear in the corner of every page.
    • Click it and send a test message to confirm the bot responds.
    The GoDaddy Airo AI assistant can overwrite code changes. If the widget stops working, check that your code is still present in index.html and republish.

    Part 2: Embedded widget

    The embedded widget is placed inside a specific section of your page. On GoDaddy Airo this requires editing TypeScript source files, the Hub generated HTML embed code does not apply here.

    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 you will find two items: the script tag and the React component code.
    2

    Add the script tag to index.html

    • If you already completed Part 1 on this site, the script tag is already in index.html, skip this step.
    • Otherwise click + and then Code to open the code editor and open index.html.
    • Paste the script tag before the closing </body> tag and click Save.
    3

    Update LastBotEmbeddedWidget.tsx

    GoDaddy Airo ships with a placeholder file for the LastBot embedded widget.

    • In the code editor file tree, navigate to src/components/ and open LastBotEmbeddedWidget.tsx.
    • Select all existing content in the file and delete it.
    • Paste the React component code copied from the Hub, then click Save.
    4

    Add the widget to your page

    • In the file tree, open src/pages/ and open the page where you want the widget to appear.
    • Add the import line at the top of the file alongside the other imports.
    • Add the widget markup at the position where the chat should appear, then click Save.
    import LastBotEmbeddedWidget from '@/components/LastBotEmbeddedWidget';

<section className="py-8">
  <LastBotEmbeddedWidget />
</section>
    You can place the component anywhere in your page content: inside an existing section, a dedicated area, or as its own block.
    5

    Control the widget width (optional)

    By default the widget fills the full width of its section. Wrap it in a container to limit the width.

    • Use max-w-lg for a narrower widget, max-w-2xl for medium, or max-w-4xl for a wider widget.
    • The widget stays centred automatically. Remove mx-auto if you prefer it left aligned.
    <section className="py-8">
  <div className="max-w-2xl mx-auto">
    <LastBotEmbeddedWidget />
  </div>
</section>
    6

    Publish and verify

    • Click Publish in GoDaddy Airo.
    • Open the live page URL in a private browser window.
    • The chat widget should appear inside the section where you placed it.
    • Send a test message to confirm the bot responds.

    Troubleshooting: popup widget

    • Confirm you clicked Publish after saving. Saving in the code editor does not make changes live.
    • Open the live URL in a private browser window to avoid cached versions.
    • Check that the code is pasted before the </body> tag in index.html, not inside the <head> section.
    • The Airo AI assistant can overwrite code changes. Re-check index.html and paste the code again if it was reverted.
    • Temporarily disable ad blockers or privacy extensions and reload.

    Troubleshooting: embedded widget

    • Confirm the script tag is present in index.html before the closing </body> tag.
    • Confirm LastBotEmbeddedWidget.tsx contains the React component code copied from the Hub.
    • Confirm the import line and the component are both added to the target page file.
    • Republish after every change and verify on the live URL in a private browser window.

    Limitations

    • •GoDaddy Airo is a single page app, all pages share one index.html, so the popup widget cannot be limited to selected pages.
    • •The embedded widget requires editing TypeScript source files in the code editor.
    • •The Airo AI assistant can overwrite manual code changes, re-check your files if the widget disappears.
    • •The widget does not appear while you are editing in the code editor, always verify on the live URL.

    Need help?

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

    Contact Supportsupport@lastbot.com