Inicio / 247Chatbot Integrations

247Chatbot Integrations

247Chatbot Integrations

⚡️ Upgrade Your Website With Seamless Integrations

Add 247Chatbot to your website or app in minutes. Follow the steps below to embed your AI agent and get it live across the most popular platforms.

Step 1: Copy Your Custom Script

Log in to your 247Chatbot.io Dashboard → Install / Embed → copy your unique script.

 
<script> (function(d, t) { var s = d.createElement(t), options = { chatbotID: "YOUR_UNIQUE_CHATBOT_ID", domain: "247chatbot.io" }; s.src = "https://cdn.247chatbot.io/embed.js"; s.async = true; d.head.appendChild(s); window._247chatbot = options; })(document, "script"); </script>

 

Step 2: Install by Platform

Paste the script just before the closing </body> tag of your site, then follow the platform-specific notes below.

Website Builders

  • WordPress — Appearance → Theme File Editor → open footer.php (or theme layout) → paste before </body> → Update File.

  • Shopify — Online Store → Themes → Edit code → open layout/theme.liquid → paste before </body> → Save.

  • Wix — Settings → Advanced → Custom Code → Add Code to Footer → Apply all pages → Publish.

  • Squarespace — Settings → Advanced → Code Injection → Footer → paste script → Save.

  • Webflow — Project Settings → Custom Code → Footer Code → paste script → Save & Publish.

  • BigCommerce — Storefront → Script Manager → Add Script → Footer (global) → paste script → Save.

E-commerce & CMS

  • Magento 2 — Content → Design → Configuration → Edit theme → Footer → Miscellaneous HTML → paste script → Save & flush cache.

  • Joomla — Templates → select your template → edit index.php → paste before </body> → Save.

  • Drupal — Appearance → Edit theme → page.html.twig → paste before </body> → clear caches.

  • Ghost — Settings → Code Injection → Site Footer → paste script → Save.

Custom Code & Frameworks

  • Custom HTML — Open your main HTML (e.g., index.html) → paste before </body> → upload to host.

  • React — Edit public/index.html → paste before </body> → rebuild & deploy.

  • Angular — Edit src/index.html → paste before </body> → rebuild & deploy.

  • Vue — Edit public/index.html → paste before </body> → rebuild & deploy.

Other Platforms

  • ClickFunnels — Funnel → Settings → Tracking Code → Footer tracking → paste script → Save.

  • Framer — Project → Settings → Code → Footer injection (site-wide) → paste script → Publish.

  • Carrd — Site → Settings → Code → Footer → paste script → Publish.

  • Notion — Use an embed/proxy (e.g., Super / Framer / Notaku) → add footer custom code → paste script → Publish.

Step 3: Publish & Test

  • Save and publish your changes.

  • Refresh your site (hard refresh: Ctrl/Cmd + Shift + R).

  • The 247Chatbot widget should appear in the bottom-right corner.

Troubleshooting

If the chatbot does not appear:

  • Ensure the full script is pasted right before </body> on your site/template.

  • Verify your chatbotID is correct in the script.

  • Purge/clear caches (CDN, plugin caches) after changes.

  • For SPA frameworks (React / Angular / Vue), place the script in the HTML entry file, not inside components.

Need Help?

Email: support@247chatbot.io Or create a support ticket in your dashboard.