Adding the IcloneU chat widget to your website lets visitors talk to your Clone without leaving your site. Pick your platform below and follow the steps to drop the widget in.
Each platform pastes the same snippet — a small script that contains your widget key. Copy that snippet from your chat or integration settings before you begin, then follow the steps for your platform.
Add the widget to your site
📝 How to Add Chat to Your Blazor App
Blazor's enhanced navigation updates the page without a full reload, which requires a few extra steps compared to a standard HTML site. Follow these steps to add the chat widget so it persists across all page navigations.
- Open your
App.razorfile — this is the root component rendered for every page in your app. - Inside the
<body>tag, after your<Routes />component, add a placeholder div and the two scripts shown below. - Replace
YOUR_API_KEYwith your actual API key from the embed dialog.
<!-- Place this block in App.razor, inside <body>, after <Routes /> --> <div id="chat-placeholder" data-permanent></div> <script> (function () { // Preserve the widget DOM across Blazor enhanced navigation. // Before morphing: move widget nodes to a fragment to protect them. // After morphing: restore nodes and stylesheet back into the page. function waitForBlazor(callback) { if (window.Blazor && typeof window.Blazor.addEventListener === 'function') { callback(); } else { setTimeout(function () { waitForBlazor(callback); }, 50); } } waitForBlazor(function () { Blazor.addEventListener('enhancednavigationstart', function () { var ph = document.getElementById('chat-placeholder'); if (!ph || ph.children.length === 0) return; window.__chatWidgetFragment = document.createDocumentFragment(); while (ph.firstChild) { window.__chatWidgetFragment.appendChild(ph.firstChild); } }); Blazor.addEventListener('enhancedload', function () { var ph = document.getElementById('chat-placeholder'); if (!ph || !window.__chatWidgetFragment) return; ph.appendChild(window.__chatWidgetFragment); window.__chatWidgetFragment = null; // Restore the stylesheet if Blazor's head morpher removed it if (!document.getElementById('icloneu-chat-styles')) { var link = document.createElement('link'); link.id = 'icloneu-chat-styles'; link.rel = 'stylesheet'; link.type = 'text/css'; link.href = 'https://icloneu.ai/css/IcloneUChat.css'; document.head.appendChild(link); } }); }); })(); </script> <!-- IcloneU Chat Widget --> <script> // Optional: identify your logged-in user so IcloneU can link conversation history. // window.IcloneUUser = { userId: 'YOUR_USER_ID' }; </script> <script> (function () { if (window.__icloneuWidgetLoaded) return; window.__icloneuWidgetLoaded = true; var s = document.createElement('script'); s.src = 'https://icloneu.ai/embed.js?key=YOUR_API_KEY'; document.body.appendChild(s); })(); </script>⚠️ Why not just paste the script in <head>? Blazor morphs the DOM on every navigation. Placing the widget anchor and scripts directly inside <body> after <Routes /> — and using Blazor.addEventListener instead of document.addEventListener — is what allows the widget to survive page changes without reinitializing.
💡 Conversation continuity: Because the widget nodes are moved rather than destroyed during navigation, the active conversation and all messages are preserved exactly as the user left them when they switch pages.
🐙 How to Add Chat to Your GitHub Pages Site
Follow these steps to add the chat widget to your GitHub Pages website:
- Navigate to your GitHub repository for your Pages site
- Locate your main HTML file or layout template (usually
index.htmlor_layouts/default.htmlfor Jekyll) - Click the Edit button (pencil icon) to edit the file
- Find the
<head>section and paste the chat script right before the</head>closing tag - Scroll down and click Commit changes
- Your site will automatically rebuild and deploy with the chat widget
⚠️ Jekyll Sites: If you're using Jekyll, add the script to your _layouts/default.html or _includes/head.html file to ensure it appears on all pages.
💡 Pro Tip: GitHub Pages may take a few minutes to rebuild and deploy your changes. Check the Actions tab to monitor the deployment progress.
🌐 How to Add Chat to Your GoDaddy Website
Follow these steps to add the chat widget across your entire GoDaddy website:
- Log in to your GoDaddy account and open your Website Builder
- Click Edit Website to open the editor
- Click the Settings icon (gear icon) in the top menu
- Select SEO from the settings menu
- Scroll down to the Header Tags section
- Paste the chat script in the Header Tags box
- Click Done and then Publish your site
⚠️ Alternative Method: You can also add custom HTML elements to individual pages using the HTML widget from the content menu, but this will only add chat to specific pages.
💡 Pro Tip: The Header Tags feature ensures the chat appears on all pages of your website. Make sure to publish your site for the changes to go live.
💻 How to Add Chat to Your HTML Website
Follow these steps to add the chat widget to your HTML website:
- Open your HTML file(s) in a text editor or code editor
- Locate the
<head>section of your HTML document - Paste the chat script right before the
</head>closing tag - Save the HTML file
- Upload the updated file to your web server
⚠️ For Multiple Pages: If your website has multiple HTML pages, you'll need to add the script to each page individually, or consider using a template system or server-side includes to avoid repetition.
💡 Pro Tip: Place the script in a shared header file or template if you're using a static site generator like Jekyll, Hugo, or similar tools.
⬜ How to Add Chat to Your Squarespace Site
Follow these steps to add the chat widget across your entire Squarespace website:
- Log in to your Squarespace account and open your website editor
- Go to Settings → Advanced → Code Injection
- Paste the chat script in the Header section
- Click Save to apply the changes
- Your chat widget will now appear on all pages of your site
⚠️ Page-Specific Installation: You can also add the code to individual pages by going to Pages → Page Settings → Advanced → Page Header Code Injection, but this will only add chat to that specific page.
💡 Pro Tip: Code Injection is available on Business plans and higher. If you're on a Personal plan, you'll need to upgrade to use this feature.
🛒 How to Add Chat to Your Shopify Store
Follow these steps to add the chat widget across your entire Shopify store:
- Log in to your Shopify Admin panel
- Go to Online Store → Themes
- Click Actions → Edit Code for your active theme
- In the Layout section, click on theme.liquid
- Paste the chat script right before the
</head>closing tag - Click Save to apply the changes
⚠️ Alternative Method: You can also use Shopify's Script Tag API or install apps that allow custom code injection without editing theme files directly.
💡 Pro Tip: Always make a backup of your theme before editing code. You can duplicate your theme from the Actions menu.
🌊 How to Add Chat to Your Webflow Site
Follow these steps to add the chat widget across your entire Webflow website:
- Log in to your Webflow Designer
- Click on the Pages panel (pages icon in the left sidebar)
- Click the gear icon next to your site name at the top
- Go to the Custom Code tab
- Paste the chat script in the Head Code section
- Click Save Changes
- Publish your site for the changes to take effect
⚠️ Page-Specific Installation: You can also add custom code to individual pages by selecting a page and going to Page Settings → Custom Code, but this will only add chat to that specific page.
💡 Pro Tip: Custom code features require a paid Webflow plan. The chat widget will appear on your published site, not in the Designer preview.
🎨 How to Add Chat to Your Wix Site
Follow these steps to add the chat widget across your entire Wix website:
- Log in to your Wix Editor and open the website you want to edit
- Click the Settings button in the top menu
- Select Custom Code from the Advanced section
- Click + Add Custom Code
- Paste the chat script in the code box
- Set Code Type to HTML
- Choose Head as the placement location
- Select All Pages for site-wide chat
- Click Apply to save your changes
⚠️ Alternative Method: You can also add the code to individual pages by going to Page Settings → SEO & Meta → Custom Code, but this will only add chat to that specific page.
💡 Pro Tip: Make sure to publish your site after adding the code for the changes to take effect on your live website.
📝 How to Add Chat to Your WordPress Site
Follow these steps to add the chat widget across your entire WordPress website:
- From your WordPress admin panel, navigate to Appearance → Theme Editor (or Theme File Editor)
- Find and click on the
header.phpfile in the list of theme files - Paste the chat script right before the
</head>closing tag - Click Update File to save your changes
⚠️ Alternative Method: If you don't see the Theme Editor option, or prefer not to edit theme files directly, you can install a plugin like Insert Headers and Footers to add the script safely without modifying your theme.
💡 Pro Tip: Using a plugin is safer because your changes won't be lost when you update your theme.
Last updated May 21, 2026 · Platform connections
