How to embed an AI chatbot widget on your website

Add the snippet with a free header/footer plugin — no theme editing required.

1. 1

   Install a header/footer plugin

   In your WordPress admin, go to Plugins → Add New, search for "WPCode" (formerly "Insert Headers and Footers"), then install and activate it.

2. 2

   Open the Header & Footer area

   Go to Code Snippets → Header & Footer in the admin sidebar.

3. 3

   Paste into the Footer box

   Paste the snippet into the "Footer" box so it loads just before the closing </body> tag on every page.

4. 4

   Save and verify

   Click "Save Changes", then open your site — the chat launcher should appear in the corner.

<script src="https://cdn.askit.me/widget.js" data-agent-id="YOUR_AGENT_ID"></script>

Prefer not to add a plugin? Many themes expose a footer-scripts field, or you can paste the snippet before </body> in your theme’s footer.php.

Paste the snippet into your theme’s layout file, just before the closing body tag.

1. 1

   Open your theme code

   In your Shopify admin, go to Online Store → Themes, click the "···" (three dots) next to your active theme, and choose "Edit code".

2. 2

   Open theme.liquid

   In the left sidebar, under the "Layout" folder, open theme.liquid.

3. 3

   Paste before </body>

   Scroll to the bottom of the file and paste the snippet on a new line, just above the closing </body> tag.

4. 4

   Save and verify

   Click "Save", then visit your storefront to confirm the launcher loads.

<script src="https://cdn.askit.me/widget.js" data-agent-id="YOUR_AGENT_ID"></script>

Tip: duplicate your theme first so you have a backup before editing code.

Add the snippet through the Custom Code panel in your site settings.

1. 1

   Open Custom Code

   In your Wix dashboard, go to Settings → Custom Code (under "Development & integrations").

2. 2

   Add a new code snippet

   Click "+ Add Custom Code", paste the snippet, and give it a name like "Ask It Me widget".

3. 3

   Choose where it loads

   Set it to load on "All pages" and place the code in "Body - end".

4. 4

   Apply and publish

   Click "Apply", then publish your site. Your site must be published with a connected domain for custom code to run.

<script src="https://cdn.askit.me/widget.js" data-agent-id="YOUR_AGENT_ID"></script>

Use Code Injection to load the snippet site-wide from the footer.

1. 1

   Open Code Injection

   In your Squarespace site, go to Settings → Advanced → Code Injection.

2. 2

   Paste into the Footer box

   Paste the snippet into the "Footer" field — it is injected before the closing </body> tag on every page.

3. 3

   Save and verify

   Click "Save", then reload your live site to confirm the launcher appears.

<script src="https://cdn.askit.me/widget.js" data-agent-id="YOUR_AGENT_ID"></script>

Code Injection is available on the Core, Plus, Advanced, and some legacy plans.

Add the snippet to your project’s Footer Code, then publish.

1. 1

   Open Custom Code settings

   In the Webflow Designer, open Site Settings (or Project Settings) → Custom Code.

2. 2

   Paste into Footer Code

   Paste the snippet into the "Footer Code" box, which renders before the closing </body> tag across your whole site.

3. 3

   Save and publish

   Click "Save Changes", then Publish your site — custom code only runs on published sites.

<script src="https://cdn.askit.me/widget.js" data-agent-id="YOUR_AGENT_ID"></script>

Add the snippet to your theme’s page template, before the closing body tag.

1. 1

   Open your theme’s page template

   In your active theme, open templates/html.html.twig (if your theme has none, copy it from Drupal core’s Stable theme first).

2. 2

   Paste before </body>

   Add the snippet on a new line just before the closing </body> tag, after the {{ page_bottom }} region.

3. 3

   Rebuild caches

   Clear Drupal’s caches via Configuration → Development → Performance → "Clear all caches" (or run "drush cr"), then reload your site.

<script src="https://cdn.askit.me/widget.js" data-agent-id="YOUR_AGENT_ID"></script>

No-code alternative: a contributed header/footer script module can add the same snippet from the admin UI without editing template files.

Load the widget with the built-in next/script component so it stays out of your bundle.

1. 1

   Import the Script component

   In your root layout, import Script from "next/script".

2. 2

   Render the widget script

   Add the <Script> element (shown below) inside app/layout.tsx for the App Router, or inside pages/_app.tsx for the Pages Router. The afterInteractive strategy loads it once, after the page is interactive.

3. 3

   Deploy and verify

   Redeploy your app, then load a page to confirm the launcher appears.

import Script from 'next/script'

<Script
  src="https://cdn.askit.me/widget.js"
  data-agent-id="YOUR_AGENT_ID"
  strategy="afterInteractive"
/>

Passing data-agent-id directly on the <Script> component forwards it to the widget exactly like the raw HTML tag.

Add the snippet through your store’s custom-code / tracking-code area in the ikas panel.

1. 1

   Open your store settings

   In your ikas panel, go to Satış Kanalları (Sales Channels) → your store, where storefront and tracking settings live.

2. 2

   Find the custom-code field

   Open your store’s custom code / tracking-code section (Eklentiler → tracking & analytics tools). ikas expects such scripts inside the <head> section; the widget still loads fine from there.

3. 3

   Paste and save

   Paste the snippet into the code field and save, then preview your storefront to confirm the launcher appears.

<script src="https://cdn.askit.me/widget.js" data-agent-id="YOUR_AGENT_ID"></script>

ikas does not expose a general header/footer code box the way some platforms do. If you can’t find a custom-code field, ikas also offers a developer theme editor (ikas Studio), or contact ikas support at [email protected].

Add the snippet through the head/body custom-code area under SEO settings.

1. 1

   Open SEO settings

   In your İdeasoft admin panel, go to Ayarlar (Settings) → Genel Ayarlar (General Settings) → SEO Ayarları (SEO Settings).

2. 2

   Open the custom head/body code area

   Find "Site İzleme & Remarketing Kodu" — the section for custom head/body tracking codes.

3. 3

   Paste and save

   Paste the snippet into the head (or body) code field and save.

4. 4

   Verify

   Reload your store to confirm the chat launcher appears.

<script src="https://cdn.askit.me/widget.js" data-agent-id="YOUR_AGENT_ID"></script>

If your site can serve a script tag, your agent can live on it.

1. 1

   Open your shared HTML

   Open the HTML file or template that renders on every page — often index.html or a shared layout/footer include.

2. 2

   Paste before </body>

   Paste the snippet on its own line, just before the closing </body> tag.

3. 3

   Deploy and verify

   Save and deploy the file, then load your site to confirm the launcher appears.

<script src="https://cdn.askit.me/widget.js" data-agent-id="YOUR_AGENT_ID"></script>

The widget also works if placed inside <head>; before </body> is recommended so your page content renders first.