Demeterics.ai (Beta)
Log In Get Started

Webflow Integration Guide

Learn how to integrate Demeterics into your workflows with step-by-step guides and API examples.

Webflow Integration Guide

Add the Demeterics AI Chat widget to your Webflow site using Custom Code.

Requirements

  • A Webflow site on a paid Site plan (site-wide Custom code is not included in the free Starter Site plan)
  • A Demeterics AI Chat widget (get your widget key from the AI Chat dashboard)

Important: Custom code does not run on the Designer canvas. Publish your site to your .webflow.io staging URL or your custom domain, then test there.

This method works site-wide and is the most reliable option.

Step 1: Get Your Widget Code

  1. Log into your Demeterics dashboard
  2. Go to AI Chat
  3. Click on your widget
  4. Copy your Agent Key (e.g., DEM-A4E4OWSVGHBN)

Step 2: Open Custom Code in Site Settings

  1. Log into your Webflow account and open your site
  2. Go to Site settings
  3. Click the Custom code tab
  4. You'll see two fields: Head code and Footer code

Step 3: Add the Widget Code

  1. Scroll down to the Footer code field
  2. Paste this code:
<!-- Demeterics AI Chat Widget -->
<script src="https://demeterics.com/widget/embed.js?k=DEM-YOUR-KEY-HERE" async></script>
<dem-agent name="default" title="Need help?" state="minimized"></dem-agent>
  1. Replace DEM-YOUR-KEY-HERE with your actual Agent Key
  2. Click Save changes

Why Footer code?: Webflow injects the Footer code field just before the closing </body> tag, so your page content renders before the widget script is processed.

Note: Do not wrap the snippet in <html>, <head>, or <body> tags — Webflow will break your layout if you do.

Step 4: Publish Your Site

  1. Click Publish in the top right corner of the Designer
  2. Select your domains and publish
  3. Visit your live site to see the widget appear in the bottom right corner

Custom code changes only go live when you publish. Saving in Site settings is not enough.

Method 2: Page-Level Custom Code

Want the widget on only some pages, or a different agent per page?

Steps:

  1. Open the Pages panel in the Designer
  2. Hover over the page and click the gear icon to open its settings
  3. Scroll down to the Custom code section
  4. Paste your widget embed code into Code placed before the </body> tag:
<script src="https://demeterics.com/widget/embed.js?k=DEM-YOUR-KEY-HERE" async></script>
<dem-agent name="support" title="How can we help?" state="minimized"></dem-agent>
  1. Replace DEM-YOUR-KEY-HERE with your actual key
  2. Click Save and publish your site

Note: Page-level code loads after Site settings code. If you already added the widget site-wide, don't add the <script> tag again here — see "Widget appears multiple times" below.

Method 3: Code Embed Element (Inline on a Page)

To place the widget inside your page content instead of floating, use Webflow's Code Embed element.

Steps:

  1. Open the Add panel (the + icon in the left toolbar)
  2. Search for "Embed" and drag Code Embed onto your page
  3. Paste this code:
<script src="https://demeterics.com/widget/embed.js?k=DEM-YOUR-KEY-HERE" async></script>
<dem-agent mode="embedded" name="default" title="Support Assistant"></dem-agent>
  1. Replace DEM-YOUR-KEY-HERE with your actual key
  2. Click Save & Close, then publish

Note: Code Embed only executes client-side HTML, CSS, and JavaScript, and it must not contain <html>, <head>, or <body> tags. Publishing still requires a paid Site plan.

Customization Options

Change the Widget Title

<dem-agent name="default" title="Chat with us!"></dem-agent>

Use Different Prompts on Different Pages

If you've created multiple prompts in your Demeterics dashboard:

Site-wide footer (most common):

<dem-agent name="default" title="Need help?"></dem-agent>

Product or pricing pages (page-level custom code):

<dem-agent name="sales" title="Product Questions?"></dem-agent>

Contact/Support pages (page-level custom code):

<dem-agent name="support" title="How can we help?"></dem-agent>

Start the Widget Open

<dem-agent name="default" title="Need help?" state="open"></dem-agent>

Embedded Widget (Inline on Page)

<dem-agent mode="embedded" name="support" title="Support Assistant"></dem-agent>

CMS Collection Pages

Custom code added to a Collection page template's page settings applies to every item in that Collection. This is the easiest way to give an entire blog, product catalog, or directory its own agent:

  1. In the Pages panel, open the Collection page template's settings
  2. Add your embed code to Code placed before the </body> tag:
<dem-agent name="product" title="Product Questions?"></dem-agent>
  1. Save and publish

Create the product prompt in your Demeterics dashboard first.

Troubleshooting

Widget doesn't appear

Check these:

  1. Did you publish after saving your custom code? Saving alone does nothing on the live site.
  2. Are you looking at the published site rather than the Designer canvas? Custom code does not run on the canvas.
  3. Is your site on a paid Site plan? Site-wide custom code is not included in the free Starter Site plan.
  4. Is your widget key correct?
  5. Is your Webflow domain added to Allowed Domains in your Demeterics widget settings?

Test on staging first: Publish to your .webflow.io staging URL to check the widget before publishing to your custom domain.

"Domain not allowed for this agent"

  1. Go to your Demeterics dashboard → AI Chat → Your Widget
  2. Add your Webflow domain to Allowed Domains
    • Staging domain: yoursite.webflow.io
    • Custom domain: yoursite.com
    • Add both if you publish to both
  3. Save and refresh your website

Widget works on staging but not on your custom domain

You published to .webflow.io but not to your custom domain. In the Designer, click Publish, tick both domains, and publish again. Then confirm the custom domain is in your Allowed Domains list.

Widget appears multiple times

You've added the embed code in more than one place. Check:

  1. Site settings → Custom code → Footer code
  2. Individual page settings → Custom code
  3. Any Code Embed elements on the page

Keep the <script src="...embed.js..."> tag in exactly one place. You can still have multiple <dem-agent> elements, but only one script tag per page.

Widget looks cut off or sits behind other elements

Webflow layouts with high z-index values on navbars or overlays can cover the widget. Add this to your Site settings → Custom code → Head code:

<style>
  dem-agent { z-index: 9999 !important; }
</style>

If that doesn't help, email support@demeterics.com with your site URL.

Widget conflicts with Webflow Interactions

If a Webflow interaction hides or moves the widget, exclude the widget from the interaction's target selector, or move the embed code to a page where the interaction isn't running.

Need Help?

Email us: support@demeterics.com

We can help with:

  • Verifying your Webflow Site plan supports custom code
  • Choosing between site-wide, page-level, and Code Embed placement
  • Setting up per-Collection agents for CMS and Ecommerce sites
  • Writing custom prompts for your business
  • Troubleshooting z-index and Interaction conflicts

Additional Resources