Step-by-step instructions for adding the IcloneU chat widget to your website or app, with a guide for each platform.
6 min read
BeginnerUpdated August 25, 2026
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.
Note
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.razor file — 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_KEY with 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.html or _layouts/default.html for 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.php file 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.
Recognise your logged-in visitors
Out of the box the widget treats every visitor as a stranger. The snippet's commented-out window.IcloneUUser block lets your page say who the visitor is, and there is a whole tab for making that claim provable: open Web chat in the sidebar, select the key, click Embed in the toolbar, and switch to the Identity tab. Its own summary is the shortest description of what this does: "Recognize your logged-in users in the chat. Your site tells the widget who the visitor is, and a signature (or your connected Shopify store) proves the claim - verified visitors get personalized answers, including their own order information."
There are three levels of claim, and only two of them are proof. The tab lays out the last two as Identity verification (the secret itself), Signed identity (any website) and Shopify storefront.
Unsigned — the plain block, window.IcloneUUser = { userId: 'YOUR_USER_ID' }, optionally with an email, name and phone. It binds the conversation to a contact so history lines up under one person, and that is all it does. Anyone can type the same thing in their browser's console, so IcloneU treats it as a claim, not a fact: order questions still go through the one-time code.
Signed — click Generate secret to give this key an identity secret. Your server computes an HMAC-SHA256 over userId + ':' + email.toLowerCase() + ':' + phone, hex-encoded, with absent fields as empty strings, and the page renders the result into the block as signature. The tab prints that formula above the snippet so your backend developer has it exactly. Note the phone is inside the signature on purpose: contacts are stitched together by email and phone, so a tamperable phone number on an otherwise signed claim could ride into another customer's purchase history.
Shopify storefront — no secret and no backend. Paste the Liquid block from the same tab into theme.liquid in place of the plain snippet, and it sends the logged-in customer's Shopify id and email. IcloneU checks that pair against your connected store's admin API and, when it matches, throws the page's email and phone away and keeps the store's, so only store-attested contact details reach your contact list.
What a proven identity actually buys
A proof earns the visitor the same 24-hour verified session the in-chat one-time code writes — nothing more and nothing less. Inside that window they can ask about their own orders without a code, and the store lookups are pointed at the verified email rather than whatever was typed in the chat. The tab states the same thing plainly: "Verified visitors are matched to your contacts and can ask about their own orders without an extra verification code. Visitors without a valid signature are still served normally - they just aren't treated as verified." Put an email in the signed block if you want that: the email is what an order lookup matches on.
The identity secret is a server-side secret
The tab's own warning is the rule: "Keep this secret on your server only - never in page JavaScript. Rotating or disabling it immediately invalidates signatures computed with the previous value." Anyone holding it can sign any identity they like, including your customers'. Rotate secret replaces it in place — the widget key doesn't change and you don't re-paste the embed snippet, but every signature your backend computed with the old value stops verifying the moment you click it, so deploy the new value first. Disable switches signed identities off for this key entirely and the widget keeps working unsigned. None of this is how you rotate the hk- widget key itself — that is still delete-and-recreate, covered in Rotate or revoke a key.
Know what this is not
Three limits are worth stating before you rely on it. A bad proof fails silently. A signature that doesn't verify — a stale secret after a rotation, a formula off by one character — is not rejected: the visitor is quietly demoted to unsigned and served as normal. That is deliberate, so a mistake never breaks your chat, but it does mean a broken integration looks exactly like a working one from the outside. The symptom to watch for is your logged-in customers being asked for a one-time code again. The signature does not expire. It proves the claim came from your server, not that it was made just now, so whoever can read a logged-in user's page can reuse it. There is no strict mode. Unsigned claims keep binding contacts as before; turning verification on for a key does not start refusing claims that lack it.
Two different tabs called Identity
This one lives in the Embed dialog on the Web chat page and is about proving who your visitor is. The Clone editor has its own Identity tab, which is about who your Clone is — its name, role and persona. They have nothing to do with each other.
Was this guide helpful?
Thanks for the feedback!
Last updated August 25, 2026 · Platform connections
