Skip to content
intoCHAT
Documentation

Install the chat widget on other platforms

Where to paste the intoCHAT script on Wix, Webflow, Squarespace, Framer, Bubble, Joomla, Drupal, Ghost, Magento, VTEX and more, with step-by-step guides.

intoCHAT works on any platform that lets you add a script to your pages. The rule is the same everywhere: paste the script tag from the Share tab into a field that outputs code at the end of the page body, on every page.

The general rule

  • Look for a field called footer code, body end or similar. A header or head field works too, because the widget waits for the page to load, but the end of the body is the recommended place.
  • Apply the code to all pages.
  • Publish the site. Most builders add custom code only to the live site, not to the editor preview.
  • If the platform changes your script tags and drops the data-chatbot-id attribute, use Google Tag Manager.

The snippet and its single attribute are explained in Install with a script tag.

Website builders and CMSs

PlatformWhere the code goesGuide
WixSettings → Custom Code, all pages, placed in Body – endWix
WebflowSite settings → Custom code → Footer code, then publishWebflow
SquarespaceCustom Code → Code Injection → FooterSquarespace
FramerProject Settings → Custom Code → Add Script, end of body, run onceFramer
BubbleSettings → SEO / metatags → the body fieldBubble
JoomlaA Custom module in a position shown on every page, created with an editor that keeps scriptsJoomla
DrupalA library in your theme that loads the script in the footerDrupal
GhostSettings → Advanced → Code injection → Site footerGhost
WordPressThe official pluginWordPress docs

Online stores

PlatformWhere the code goesGuide
Shopifytheme.liquid, just above </body>Shopify docs
WooCommerceThe official WordPress pluginWooCommerce
MagentoContent → Design → Configuration → Footer → Miscellaneous HTMLMagento
VTEXA Custom HTML tag in Google Tag Manager, or your storefront codeVTEX

On all of these, Connect your website on the Actions tab can also give the agent live product search from your store's public data. See Connect your store.

Frameworks

PlatformWhere the code goesGuide
Next.jsnext/script in the root layoutNext.js
Reactindex.html, or a component with useEffectReact

Both are covered in Next.js and React.

Google Tag Manager

Google Tag Manager removes data attributes such as data-chatbot-id from script tags in Custom HTML tags, so the normal snippet loads without knowing which agent to show. Use this snippet in a Custom HTML tag instead, with your agent ID, and fire it with a DOM Ready trigger:

<script>
  (function () {
    if (document.getElementById('intochat-embed')) return;
    var s = document.createElement('script');
    s.id = 'intochat-embed';
    s.src = 'https://www.intochat.ai/api/embed.js';
    s.setAttribute('data-chatbot-id', 'YOUR_AGENT_ID');
    document.body.appendChild(s);
  })();
</script>

The check at the top keeps the script from loading again if the tag fires twice on the same page. The full steps are in the Google Tag Manager guide.

Platform not listed

  • If it lets you add HTML or a script at the end of the body, the script tag works.
  • If it only allows code in the head, paste the script tag there. It works in the head too.
  • If it allows no custom code at all, link to your agent's direct chat page from a button or menu item.

View as Markdown