Install the website widget

Your avatar's website widget is one line of code on your website. This guide shows where that line goes on Shopify, Wix, Squarespace, WordPress, Webflow and any other website, how to check that it works, what a Content Security Policy needs, how the widget behaves in a single-page app, and how to take it off again. To set the widget up through the API instead of the console, see An avatar on your website.

Before you start#

An owner or admin of your Zentiq organization does these steps in the console.

1. Open the widget. Under Avatars, open the avatar and scroll to Put name on your website, near the bottom of its page. The first time, press Set up the widget. Everything below is on its No-code tab.

2. List your websites. Under Your websites, add every address your site is visited at, then press Save changes. The widget runs only on these websites: pasted anywhere else, the same line shows nothing.

   • Each address counts on its own: www.example.com and example.com are two websites, and so are example.com and shop.example.com. You can add up to 20.
   • An address is taken as https:// unless you type http://, and a port counts too. To try the widget on your own computer, add your development server as well, for example http://localhost:3000.
3. Choose how it shows. Floating is a button in a corner of every page; Inline is a panel inside your page. You also choose whether it starts open or as just the button, which corner, the button's words and color, and whether it opens ready to talk or to type. These settings live in Zentiq, so you can change them later without touching your website. Only a switch to Inline needs a change on your pages (see An inline widget).
4. Copy the line. Under Add it to your website, press Copy, or Send these steps to my developer to email it with where it goes. Through the API, GET /v1/personas/{id}/widget returns it as snippet.
5. Switch it on with the switch at the top of the section. It goes live once it has your websites, the email address where visitors' requests go, and something to answer from (a document, your website or an approved answer); the section lists anything still missing. Until then the line shows nothing, so you can paste it first.

Your line looks like this:

<script src="https://app.zentiqai.com/widget.js" data-avatar="yourorg/w-1a2b3c4d5e6f" async></script>

data-avatar is your widget's public name. The line holds no key or token, so it's safe on any page. It loads without holding up your page; while the widget starts as a button, nothing more loads until a visitor presses it, and the microphone is asked for only when a visitor chooses to talk.

Shopify#

You need: a plan whose online store you can customize (the Starter plan can't). A paid theme can be edited only once you've bought it.

1. From your Shopify admin, go to Online Store. Shopify recommends duplicating your theme first, as a backup.
2. Next to your current theme, click the menu icon (⋯), then Edit code.
3. In the file list, open layout/theme.liquid (or press ⌘ + P on a Mac, Ctrl + P on Windows, and type theme.liquid).
4. Find </body> near the end of the file and paste your line just above it.
5. Click Save.

When you update your theme to a new version, Shopify carries your code edits over unless they conflict with the update, and says when it couldn't: then paste the line into the new version again.

Without editing code: if your theme has a Custom Liquid section, go to Online Store, click Edit theme, then click Add section in the footer area of the sidebar, choose Custom Liquid, paste your line into it and click Save. Sections in the header and footer areas show on every page (a section in a page's own template shows only on pages that use that template), and changes made in the theme editor are kept when you update your theme. The widget has no Shopify app embed to switch on.

Your websites: your store's address as the browser shows it, such as www.yourstore.com, or its yourstore.myshopify.com address if it has no domain of its own. A shared visitor preview link (an address ending in shopifypreview.com) is another website: add it while you test there, then remove it. Check the widget on your store itself rather than in the theme editor, which shows your store inside Shopify's admin, where the panel can't open.

Inline: add a Custom Liquid section where the avatar should appear and paste <div id="zentiq-avatar"></div> into it, with the script in theme.liquid as above.

Shopify's checkout isn't part of your theme, so the widget doesn't show there.

Wix#

You need: a published site with a connected domain, which needs a Wix Premium or Studio plan.

1. Go to Settings in your site's dashboard.
2. Click Custom Code in the Development & integrations section.
3. Click + Add Custom Code at the top right.
4. Paste your line into the text box and give it a name, such as Zentiq avatar.
5. Under Add Code to Pages, choose All pages. Either loading option works: the widget never shows twice.
6. Under Place Code in, choose Body – end.
7. Click Apply.

Your websites: your connected domain as the browser shows it, such as www.yourbusiness.com.

• Wix runs custom code only on your published site, not in the Editor.
• Your code belongs to your domain: if you connect a different one, Wix deletes the code. Add the line again, and add the new address to Your websites.
• Use the Floating layout. Wix's HTML embed elements show code inside a frame of their own, which isn't at your website's address, so the widget shows nothing there.

Squarespace#

You need: a Core, Plus or Advanced plan, or an older plan that includes code injection.

1. Open the Pages panel and click Custom Code at the bottom (on version 7.0, Website Tools).
2. Click Code Injection.
3. Paste your line into the Footer field. Squarespace adds it just before </body> on every page.
4. Click Save.

Your websites: your domain as the browser shows it, such as www.yourbusiness.com, and your yoursite.squarespace.com address too if you open the site there.

• Custom code may not run in the editor or while you're logged in: check in a private window.
• Squarespace doesn't run custom code on checkout pages.

Inline: edit the page, add a Code block where the avatar should appear (Add block, then Code) and paste <div id="zentiq-avatar"></div> into it, with the script in Code Injection as above.

WordPress#

WordPress.org#

On a WordPress site you host yourself, a header and footer plugin is the simplest way, and it works with any theme:

1. In your WordPress admin, go to Plugins and add a new plugin: search for WPCode, then install and activate it.
2. Go to Code Snippets → Header & Footer.
3. Paste your line into the Footer box.
4. Click Save Changes.

Any plugin that adds code to your site's footer works the same way.

In your theme instead (for developers): add this to your child theme's functions.php. It prints the line with the wp_footer hook, which themes run just before </body>:

add_action( 'wp_footer', function () {
	echo '<script src="https://app.zentiqai.com/widget.js" data-avatar="yourorg/w-1a2b3c4d5e6f" async></script>';
} );

Don't edit your theme's own files: a theme update replaces them, and your line with them.

Your websites: your site's address, from Settings → General → Site Address (URL).

• If a caching plugin is on, clear its cache so your pages include the line. A speed setting that delays JavaScript until a visitor interacts with the page delays the widget too: exclude widget.js from it.

Inline: add a Custom HTML block where the avatar should appear and paste <div id="zentiq-avatar"></div> into it, with the script in the footer as above.

WordPress.com#

You need: a paid plan (Personal, Premium, Business or Commerce). Sites on the free plan can't add code.

1. In your site's dashboard, click Plugins, search for WPCode, and click Install and activate on the free Insert Headers and Footers plugin by WPCode.
2. Go to Code Snippets → Header & Footer, paste your line into the Footer box, and click Save Changes.

Your websites: your yoursite.wordpress.com address, and your own domain if you've added one.

Webflow#

You need: an active Site plan on the site, or a Core, Growth, Agency or Freelancer Workspace.

1. Open your site's Site settings and go to the Custom code tab.
2. Paste your line into Footer code. Webflow adds it just before </body> on every page.
3. Click Save changes.
4. Publish your site: custom code goes live only when you publish.

For one page only: in the Designer, open that page's Page settings, paste the line into Before </body> tag under Custom code, save, and publish.

Your websites: your domain as the browser shows it, and your staging address (yoursite.webflow.io) if you test there. Check the widget on your published site, not in the Designer.

Inline: add a Code Embed element from the Add panel where the avatar should appear, paste <div id="zentiq-avatar"></div> into it, then save and publish, with the script in Footer code as above.

Any other website#

Paste the line just before </body> on every page where the avatar should appear. On most sites that's one file every page shares: a layout, a base template or a footer include. On another website builder, look for a setting that adds code to every page, often called Custom code, Code injection or Footer code, and choose the end of the body if it asks where.

Use a setting that puts the code in your page itself. An HTML embed element that shows code inside a frame of its own doesn't work: that frame isn't at your website's address, so the widget shows nothing there.

An inline widget#

With Inline, the panel sits inside your page instead of floating in a corner, and the console's code is two lines:

<div id="zentiq-avatar"></div>
<script src="https://app.zentiqai.com/widget.js" data-avatar="yourorg/w-1a2b3c4d5e6f" async></script>

• Put the div where the avatar should appear. The script can stay in your site-wide footer, as in the steps above, or go straight after the div.
• To fill an element of your own instead, leave out the div and add data-target="#its-id" (a CSS selector) to the script.
• The panel fills its element: at least 280 by 480 pixels, and the full width on a phone.
• The layout is one setting for the whole widget: with Inline chosen, a page without the element shows nothing at all.
• The widget looks for its element when it loads, so the element must be on the page by then (see Single-page apps).

Check that it works#

1. On the avatar's page, the widget's status reads Live on your website and says where visitors see it. If it's switched on but not showing yet, it says what's missing.
2. Open your website in a private window, at one of the addresses you listed. Some builders don't run custom code in their editor or while you're logged in, a page shown inside a builder's editor can't open the panel, and browser extensions such as ad blockers are usually off in a private window.
3. Look for the button in the corner you chose, with your avatar's picture, its words (Talk to and your avatar's name, unless you changed them) and an AI label; an inline widget sits in its element instead. Press it and the panel opens. A spoken conversation there uses your minutes like any visitor's; a typed one doesn't.

Changes to the widget or to your websites can take a few minutes to reach your site.

If it isn't there, open your browser's developer tools (in most browsers, right-click the page and choose Inspect), go to the Console and reload the page:

Once the widget shows, document.querySelector("zentiq-widget") finds its element.

Content Security Policy#

You need this only if your website sends a Content Security Policy of its own, as a header or a <meta> tag. Add these to the directives your policy has (a directive your policy doesn't have falls back to default-src: add them there instead):

• Your avatar's picture: its address is face under The widget's settings, on the widget's API integration tab.
• If your script-src uses a nonce, put it on the script tag (<script nonce="…" src="…">). With 'strict-dynamic', the nonce is what lets the script load, because host names are ignored.
• The widget keeps its styles inside its own element, so they never reach your page. A policy without 'unsafe-inline' for styles stops the widget from drawing itself, and a nonce doesn't cover them.
• Nothing to add for frame-ancestors: Zentiq tells browsers which websites may show the panel, from Your websites.

Permissions-Policy: if your site sends a Permissions-Policy header that limits the microphone or autoplay, include the widget's address, or visitors can type but not talk:

Permissions-Policy: microphone=(self "https://app.zentiqai.com"), autoplay=(self "https://app.zentiqai.com")

Visitors can talk only on an https page (or on localhost while you test): browsers don't give a microphone to a panel inside an http page.

Single-page apps#

In an app that changes pages without reloading (React, Vue, Angular, Svelte and the like):

• Add the line once, to the page every route shares, such as your index.html or your root layout, not to a component each route renders. Loading the same line again does nothing: the widget is placed once per page load.
• A floating widget adds its own element at the end of <body>, outside your app's content, so a conversation carries on while visitors move between your routes, as long as your app doesn't replace <body> itself.
• Open and close it from your own buttons with ZentiqWidget.open() and ZentiqWidget.close(). They exist as soon as the line has run, and do nothing until the widget shows.
• An inline widget looks for its element once, when it loads. Render the element before the line runs, for example by adding the script from the component that shows the element, once it's on the page. If your app removes the element, the panel goes with it and comes back on the next full page load. For a widget on every route, Floating is simpler.
• With the site guide on, ZentiqWidget.onNavigate(...) lets the avatar open your pages your app's own way: see Show visitors around your website.

Remove the widget#

• Everywhere at once: switch the widget off at the top of Put name on your website. Within a few minutes it shows on no website, even where the line is still in place, and switching it back on brings it back. Its settings and your visitors' requests are kept.
• From one website: remove that address from Your websites and press Save changes.

• The line itself: take it out where you added it, with the div too for an inline widget. While the line stays on a page, it still asks for the widget's settings on every visit, and your browser's console shows that request failing while the widget is off.

  • Shopify: delete it from layout/theme.liquid and click Save, or remove its Custom Liquid section in the theme editor and click Save.
  • Wix: in Settings → Custom Code, look for the snippet you named and delete it.
  • Squarespace: delete it from the Footer field in Code Injection and click Save.
  • WordPress: delete it from the Footer box in Code Snippets → Header & Footer and click Save Changes, or from your child theme.
  • Webflow: delete it from Footer code in Site settings → Custom code, click Save changes, and publish.
  • Any other website: delete it from the template you added it to.