Webflow

Webflow

Webflow makes it easy to inject custom scripts globally across your entire site through its Custom Code settings panel. No coding background is required — just a few clicks and the widget will be live.

Adding the Widget via Site-Wide Custom Code

1. Open your project in the Webflow Designer.
2. Click on the Pages panel icon, then go to Site settings (wrench icon), or navigate to Project Settings from the Webflow dashboard.
3. Select the Custom Code tab.
4. Scroll to the Footer Code section.
5. Paste the following snippet:

<!-- LookIA Search Widget -->
<script
  src="https://cdn.lookia.io/lookia-widget.min.js"
  data-site-id="YOUR-UNIQUE-SITE-ID"
  defer
></script>

6. Click Save Changes.
7. Publish your site to apply the changes to the live domain.

Replace YOUR-UNIQUE-SITE-ID with the Site ID from your LookIA dashboard under Sites > [Your Site] > Embed Code.

Important: Custom code injected via Project Settings only appears on the published site, not in the Webflow Designer preview.

Adding the Widget to a Specific Page Only

If you want the widget to appear on only one page (e.g., a dedicated search results page or a documentation section):

1. In the Webflow Designer, select the target page from the Pages panel.
2. Click the gear icon next to the page name to open Page Settings.
3. Scroll to the Custom Code section at the bottom.
4. Paste the script in the Before </body> tag field.
5. Click Save and re-publish.

Using an Embed Component

Alternatively, you can use Webflow's Embed component to inject the script in a specific location within a page's layout:

1. In the Designer, drag an Embed element from the Add Elements panel (+) to your canvas.
2. Paste the <script> tag in the code editor that appears.
3. Click Save & Close.

This approach is useful if you are building a custom search input area and want the widget to load in proximity to a specific section.

Triggering the Widget from a Webflow Button

If you want to use one of your own Webflow buttons to open the LookIA modal instead of (or in addition to) the floating button, you have two options:

Option A: CSS Selector (No Code)

1. Select your button in the Designer and give it a CSS class or ID (e.g., search-trigger).
2. In your LookIA dashboard under Sites > [Your Site] > Configuration > Advanced, set the Custom Selector field to #search-trigger or .search-trigger.
3. Publish your site. Clicking that button will now open the LookIA modal.

Option B: Inline Interaction Script

Add a custom interaction via an Embed block:

<script>
  document.getElementById('my-search-button').addEventListener('click', function () {
    if (window.LookIA) {
      window.LookIA.open()
    }
  })
</script>

Verifying the Integration

1. Publish your Webflow site to the staging or production URL.
2. Open the live URL in a browser (not the Designer preview).
3. The LookIA floating button should appear at the bottom-right corner.
4. Confirm your site URL matches what is registered in the LookIA dashboard.