Back to blog

You've built an AI assistant that answers from your documents. Now you need to put it on your website. The embed code is one line, but where you paste it depends on your platform.

This guide covers the exact steps for each major website builder and CMS.

The embed code

Every platform uses the same code. You just need your project slug (found in your project's Publish tab):

<script src="https://ask360.app/widget.js" data-project="your-project-slug"></script>

This creates a floating chat bubble. Visitors click it to open your AI assistant. The widget is under 10 KB, loads lazily, and won't slow down your site.

Shopify

Theme editor method

1. Log into your Shopify admin
2. Go to Online Store > Themes
3. Click Actions > Edit Code on your active theme
4. Open theme.liquid in the Layout section
5. Find the closing </body> tag (near the bottom)
6. Paste the script tag on the line before </body>
7. Click Save

App method (alternative)

If you don't want to edit theme code, use a free app like "Custom Code Sections" from the Shopify App Store. Add a custom HTML section and paste the script tag.

Notes

• The widget works with all Shopify themes (Dawn, Debut, etc.)
• It loads after your store's content, so it won't affect page speed scores
• The bubble appears on every page. To limit it to specific pages, wrap the script in a Liquid conditional:

{% if template == 'page' and page.handle == 'support' %}
<script src="https://ask360.app/widget.js" data-project="your-slug"></script>
{% endif %}

WordPress

Theme file method

1. Log into your WordPress admin
2. Go to Appearance > Theme File Editor
3. Select footer.php from the file list on the right
4. Find the closing </body> tag
5. Paste the script tag before it
6. Click Update File

Plugin method (recommended)

If you're not comfortable editing theme files, use the Insert Headers and Footers plugin (by WPCode):

1. Install and activate the plugin
2. Go to Code Snippets > Header & Footer
3. Paste the script tag in the Footer section
4. Save

This method survives theme updates, which is why it's recommended.

Elementor / page builders

For Elementor, Divi, or other page builders:

1. Add an HTML or Custom Code widget to your footer template
2. Paste the script tag
3. Save and publish

Wix

1. Log into your Wix dashboard
2. Go to Settings > Custom Code (under "Advanced")
3. Click Add Code
4. Paste the script tag
5. Set Place Code in: to Body - End
6. Set Apply to: to All Pages (or specific pages)
7. Click Apply

Wix Editor X / Studio

Same steps, but access Custom Code through Site Settings > Custom Code.

Squarespace

1. Log into your Squarespace site
2. Go to Settings > Developer Tools > Code Injection
3. Paste the script tag in the Footer field
4. Click Save

The widget appears on all pages. Squarespace doesn't support per-page code injection natively. If you need it on specific pages only, use a Code Block on that page instead.

Webflow

1. Open your Webflow project
2. Go to Project Settings > Custom Code
3. Paste the script tag in the Footer Code section
4. Click Save Changes
5. Publish your site

For a specific page only: open the page settings and paste in the page-level Custom Code > Before tag field.

Static HTML

The simplest case. Open your HTML file and paste before </body>:

    <script src="https://ask360.app/widget.js" data-project="your-slug"></script>
  </body>
</html>

React / Next.js

Add to your root index.html before </body>, or load dynamically in a component:

import { useEffect } from 'react';

export default function ChatWidget() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://ask360.app/widget.js';
    script.setAttribute('data-project', 'your-slug');
    document.body.appendChild(script);
    return () => document.body.removeChild(script);
  }, []);

  return null;
}

For Next.js App Router, use this in your root layout.

Vue / Nuxt

In nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        { src: 'https://ask360.app/widget.js', 'data-project': 'your-slug', body: true }
      ]
    }
  }
})

Or use the useHead composable in a layout component.

Inline embed (alternative)

If you want the chat embedded in a page section instead of a floating bubble:

<iframe src="https://ask360.app/chat/your-slug?embed=1"
        width="100%" height="600" frameborder="0"
        allow="clipboard-write"></iframe>

Good for dedicated help pages or support sections. Works on all platforms.

Customization

The bubble inherits your project's branding (colors, logo). You can also override position and color in the embed code:

<script src="https://ask360.app/widget.js"
        data-project="your-slug"
        data-position="left"
        data-color="#3b82f6"></script>

Troubleshooting

Widget doesn't appear:

• Check that the script tag is before </body>, not in <head>
• Verify your project is in Published status
• Check browser console for JavaScript errors

Widget appears but chat won't load:

• Ensure the project slug matches exactly (lowercase, hyphens)
• Check that your project has at least one embedded document

Conflicts with other scripts:

• The widget uses z-index 2147483646 (near max). If something covers it, check for competing z-index values
• The widget runs in an iframe, so your page CSS cannot affect the chat styling

Get started

Sign up free, upload your documents, and have your AI chat live on any platform in minutes.