Add Your Agent to Your Website

The chat window is a chat bubble in the corner of your website (some people call it the widget or popup). When a visitor clicks it, they can ask questions and get instant answers from your Knowledge Base - without leaving your page. This is the moment your agent goes to work for you, around the clock.

The DeskClone chat window as a visitor sees it, with the agent's welcome message and a message input box

Off, On and Live

Your agent is always in one of three states, shown at the top of the Add to your website sub-tab. A new agent starts On, and stays out of sight until you add its code to your website:

• Off - nobody can chat with it, on your website or on its share link. An agent is off only if you turned it off (or your plan has no website agent). Turning it on gives you your code; nobody sees your agent until you add the code to your website. If the code is already on your website, turning it on makes it answer shoppers there straight away. While it is off, a visitor who opens the chat sees your Message while your agent is off instead of a greeting, and can't send messages.
• On - it answers anyone who opens your share link or a page with your code.
• Live - it has opened on your own website, so shoppers there can ask it questions. The tab shows where and when it was last seen.

Live comes only from your agent actually opening on your website, never from turning it on. If a week passes with no visits, the tab says when it was last seen and suggests adding the code again if you changed your theme. If it opens on a website that is not yours, or on one your Where it shows list does not allow, the tab names that website and offers the one fix.

Add It to Your Website

The Add to your website sub-tab: the status line says Live on the owner's website, Shopify is chosen, and its two steps show the code ready to copy

Email the steps opens your own email app with the steps and the code filled in, addressed to you. Someone else looks after your site? Change the address next to it first, and the email goes to them instead.

Shopify

1. In Shopify, go to Online Store. Next to your current theme, click the ... button, then Edit code.
2. Open layout/theme.liquid. Find </body> (Ctrl+F, or Cmd+F on a Mac) and paste this code on the line above it. Then click Save.

Shopify suggests duplicating your theme first, as a backup. Updating your theme removes code changes. If your agent disappears after an update, paste it again. From Shopify's guide to editing theme code.

WordPress

1. In WordPress, go to Plugins, then Add New. Search for DeskClone AI, click Install Now, then Activate.
2. Open the plugin's Widget display settings and manual key (the plugin still calls the chat window the widget). Paste this key, tick Show the widget, and save.

Use this key rather than Connect in the plugin, so the plugin uses this agent instead of building a new one. From the DeskClone AI plugin on WordPress.org; the plugin has its own article.

Wix

1. In your Wix dashboard, go to Settings, then Custom Code (under Development & integrations). Click + Add Custom Code.
2. Paste this code. Under Add Code to Pages choose All pages, and under Place Code in choose Body - end. Click Apply.

Wix allows this only on a published site with a connected domain. No connected domain yet? Use your share link for now. From Wix's guide to custom code.

Squarespace

1. Open the Code Injection panel for your site. Squarespace's guide links straight to it.
2. Paste this code into the Footer box, then Save.

Code injection is available on the Core, Plus and Advanced plans. It does not run on checkout pages. From Squarespace's guide to code injection.

BigCommerce

1. In BigCommerce, go to Storefront, then Script Manager. Click Create a Script and give it a name.
2. Set Placement to Footer, Location to Storefront pages, and Script category to Functional. Choose to enter the script yourself, paste this code, then click Save.

Script Manager works on stores using a Stencil theme. BigCommerce puts live chat under Functional, so shoppers who turn off functional cookies will not see the chat. From BigCommerce's guide to Script Manager.

Something else

1. Paste this code once, in your site's footer or custom code setting, and it loads on every page. Most site builders call this setting Custom code, Code injection, Footer code or Tracking code. If you edit the HTML yourself, put it just before </body> in the footer every page shares.

<script
  src="https://agents.deskclone.ai/embed/chat.js"
  data-key="your-connection-key-here"
></script>

That is all most sites need - the chat window loads on its own and does not slow your page down. Other ways to add it has two more:

• Page code (an iframe) - the full-page chat inside a fixed-size frame on one page. An agent added this way does not show as Live on the Share tab.

• Inline - the chat directly inside an element of your own page (no floating bubble), ideal for a dedicated "Support" page:

  html

  Copy

  <div id="deskclone-chat" style="height:600px;max-width:480px;"></div>
  <script
    src="https://agents.deskclone.ai/embed/chat.js"
    data-key="your-connection-key-here"
    data-mode="inline"
    data-container="#deskclone-chat"
  ></script>

Share link

No website you can add code to (Etsy, Amazon, or social only)? Choose No website I can add code to for your share link, a full-page chat. Your link is ready. Put it in your Instagram bio, order emails and shop announcement.

Replace key

Replace key (some people say rotate or reset) gives your agent a new Website code key, for when the one on your website may have been seen by someone it shouldn't. The code there stops working at once, so put the new code on your site straight after. You can also ask Jarvis to replace it; it shows a card, and nothing changes until you press Replace key.

Connected stores and sites

If you connected your store or site through the DeskClone AI plugin or app, it put the chat on your site for you, and its own article covers it: WordPress, Shopify, Wix. Name, welcome message, colors and allowed websites stay here in DeskClone under Share, and changes reach your site straight away.

Customize the Look

On the Appearance sub-tab you can set:

• Display name - shown in the chat window header. Left empty, the header shows your agent's name, or your store's or site's name while the agent is connected to your store or site
• Welcome message - the first thing visitors see
• If you run out of conversations (also called the capacity limit message) - what visitors see when your monthly conversation limit is reached
• Message while your agent is off - what visitors see in the chat window while this agent is off, for example where to email you instead. Each agent has its own. Left empty, they see "This chat isn't available right now."
• Primary color - the header, your customer's messages, and the send button once there is something to send
• Position - which corner the bubble sits in

Changes save instantly - you do not need to touch the script tag on your website again.

The Appearance sub-tab showing the primary color picker and a live preview of the chat window

File and Photo Attachments

Visitors can attach files and photos right in the chat - images (JPEG, PNG, GIF, WebP), PDFs, and text or Markdown files. Your agent reads images as part of the conversation, so a visitor can show a screenshot of an error or a photo of a product and get help with it.

Visitor Ratings

Every answer carries thumbs up / thumbs down buttons - always visible on the newest answer (including on phones) and on hover for earlier ones. These ratings feed the Helpful answers number on your Reports page, counted per conversation so one unhappy chat is one unhappy chat, no matter how many messages it rated.

Rating the Chat and NPS

When a chat ends with an answer, your customers are asked one short question about it, a few seconds after the goodbye:

• How was this chat? - a 1 to 5 rating, asked of a customer chatting with you for the first time.
• How likely are you to recommend [your store]? - the would-recommend score (NPS) question, with your store name, 0 to 10, asked instead of the chat rating when a customer comes back on the same browser or device. Each customer sees it at most once every 90 days.

A customer is only ever asked one of the two in a chat. Choosing a number saves it straight away, and an optional comment box follows with a question that fits the score. The card never interrupts: it does not appear while your agent is replying, while the customer is typing, or while a handover to your team is being arranged, and it goes away the moment the customer writes again. It comes back only when the chat ends again. Customers can close it with the x in its corner.

Both questions are on for every agent. To turn either off, open the agent, choose Share, then Ratings, and switch off Ask customers to rate the chat or Ask customers if they'd recommend you. The answers and comments appear under Customer feedback on your Reports page.

The "Powered by DeskClone" Badge

By default the chat window shows a small Powered by DeskClone badge. On Pro and Business plans it is hidden automatically, so visitors see only your brand.

Where It Shows and Identity

Two more Share sub-tabs fine-tune the chat window:

• Where it shows - which of your pages the bubble appears on, and optionally Only show on these websites. Leave that list empty to allow any site; your share link and preview always work.
• Ask who's chatting - asks visitors for their name or email before they chat, and sets the name and avatar your agent shows in the chat header.

Tell DeskClone Who the Visitor Is

If your site knows who is signed in, pass their name and email to the chat window. Your team then sees who wrote on every ticket, and the agent never has to ask for an address you already have. Visitors see nothing different. Add either attribute to the chat window code:

<script
  src="https://agents.deskclone.ai/embed/chat.js"
  data-key="your-connection-key-here"
  data-visitor-name="Jane Doe"
  data-visitor-email="jane@example.com"
></script>

If someone signs in after the page has loaded, call DeskClone.identify({ name: 'Jane Doe', email: 'jane@example.com' }). You can also set window.DeskCloneVisitor = { name, email } before the chat window code. The support form uses the same attributes to fill in Name and Email for the visitor, who can still change them.

These details only fill gaps. An address the visitor types in the chat is never replaced, and anything your page passes is treated the same way as what a visitor types.

Without any code, a ticket still shows the page the visitor wrote from, the site that sent them there, their city, browser and device, the language they write in when it isn't English, and the time it is for them now. When your agent hands a chat to your team, it passes on a name the visitor gave in the chat.

Before You Go Live

A quick checklist:

• Your agent has a personality description
• Your Knowledge Base covers your most common questions
• You have previewed the agent or opened the share link and had a real conversation
• Your brand color and welcome message are set
• Your agent is on, and the Share tab shows it Live on your website

What's Next

If the chat window does not appear or conversations fail, the Troubleshooting guide walks through the common fixes (Website code key, script placement, allowed domains).

Once the Share tab says Live, connect your support inbox so emails become tickets too - head to Where Tickets Come From.