Add the chat widget to your website

Copy your widget code

1. 1Click Chat widget in the menu (under Setup). You can also get there from Integrations > Website chat & voice.
2. 2Find 1. Add the widget to your website.
3. 3Click Copy to copy your widget code.

Now paste it on your website. Pick your website builder below.

Shopify

1. 1Go to Online Store > Themes in your Shopify admin.
2. 2Click the ... menu next to your current theme, then Edit code.
3. 3Open layout/theme.liquid.
4. 4Paste the code just above </body> and click Save.

Tip: click Duplicate on your theme first as a backup. If you later install a theme update, paste the code into the new version again.

WordPress

1. 1Go to Plugins > Add New in your WordPress admin.
2. 2Search for WPCode (Insert Headers and Footers), then click Install Now and Activate.
3. 3Go to Code Snippets > Header & Footer.
4. 4Paste the code into the Footer box and click Save Changes.

Tip: don't paste it into your theme's footer.php file. Theme updates overwrite that file. On WordPress.com, adding plugins or code needs a paid plan.

Wix

1. 1Go to Settings > Custom code (under Development & integrations) in your site dashboard.
2. 2Click + Add Custom Code and paste the code.
3. 3Choose All pages, set Place code in to Body - end, then click Apply.

Wix only runs custom code on published sites with a premium plan and a connected domain.

Squarespace

1. 1Open the Pages panel, scroll to the bottom and click Custom code, then Code injection. On older (7.0) sites it's under Settings > Advanced > Code injection.
2. 2Paste the code into the Footer box.
3. 3Click Save.

Code injection needs a Squarespace plan that includes it (Core, Plus, Advanced or some older Business plans).

Webflow

1. 1Open Site settings > Custom code.
2. 2Paste the code into Footer code and click Save changes.
3. 3Publish your site so the change goes live.

Custom code needs a paid Webflow Site plan (or a paid Workspace plan).

Framer

1. 1Open Site Settings in your Framer project, then Custom Code.
2. 2Click Add Script (or +), give it a name like Frontivo.io and paste the code.
3. 3Place it at the end of <body>, on all pages, and save.
4. 4Click Publish so the change goes live.

If custom code is locked, your Framer plan may need an upgrade.

GoDaddy

1. 1Open your site in the GoDaddy Websites + Marketing editor and go to the page you want (for example Home).
2. 2Click Add Section, search for HTML and click Add.
3. 3Paste the code into the Custom Code box and make the section tall (about 700 pixels) so the chat has room to open.
4. 4Click Publish. Repeat on your other main pages, such as Contact.

GoDaddy's builder has no site-wide code option, and the HTML section runs code inside a box on that page only, so the chat button appears in that section rather than the corner of every page.

Google Sites

1. 1Open your site and go to the page you want (for example Home).
2. 2Click Insert > Embed, then the Embed code tab.
3. 3Paste the code, click Next, then Insert.
4. 4Drag the box's corners to make it big (about 400 x 700 pixels) so the chat has room to open, then click Publish.

Google Sites only allows code inside an embed box on one page, not a site-wide chat button. The chat shows inside that box, and voice may be blocked there (typing works).

Square Online

1. 1In your Square Dashboard, go to Square Online (under Channels), then Settings > Tracking tools.
2. 2Click Add new code, name it Frontivo.io and paste the code.
3. 3Choose End of body and click Save.
4. 4Open your site editor and click Publish.

Weebly

1. 1Open your site in the Weebly editor and click Settings, then SEO.
2. 2Paste the code into the Footer Code box and save.
3. 3Click Publish.

No Settings tab in your editor? Look under Website > General settings in your dashboard. Weebly may need a paid plan for footer code.

Duda

1. 1In the Duda editor, open Settings from the side panel.
2. 2Click Body End HTML and paste the code.
3. 3Save, then click Republish.

Duda sites are often run by a web agency. If you can't see Settings, send these steps to your web designer.

HubSpot

1. 1Click the settings (gear) icon in HubSpot, then Content > Pages in the left menu.
2. 2Choose your domain, or Default settings for all domains.
3. 3Paste the code into Site Footer HTML (click Override default settings first if you picked one domain).
4. 4Click Save.

Any other website (HTML)

1. 1Open the HTML file for your site, or the shared footer template.
2. 2Paste the code just before the closing </body> tag.
3. 3Save and upload the file. If your pages don't share a footer, repeat this for every page.

Check it's working

1. 1Open your website in a private (incognito) window.
2. 2Look for the chat button in the corner. It should appear within a few seconds.
3. 3Go back to Chat widget and click I've added it.

When we spot the widget on your site, the status box at the top of the page turns green and shows Live on followed by your website address.

Someone else looks after your website?

On Chat widget, go to Someone else looks after your website?. Enter their email, choose what your site is built with, and click Email instructions. We'll send them the code and the steps.

Change how it looks

Click Chat widget in the menu (under Setup). Under 2. Customize how it looks, you can change the widget's color, theme, side of the screen, font, welcome message and suggested questions. Click Save changes when you're happy.

The Live preview next to it shows your changes before you save. Chats you have there are tests: they don't count toward your usage and don't add customers.

Ask visitors for their contact details

1. 1Click Chat widget in the menu (under Setup).
2. 2Under 2. Customize how it looks, find Ask for contact details.
3. 3Choose During the chat, once they show interest (recommended), Only when needed, or Before the chat starts.
4. 4If you chose Before the chat starts, pick what the form asks for next to the name: Email or phone, Email, Phone or Both.
5. 5Click Save changes. Visitors see it on their next page load.

During the chat, once they show interest: visitors start chatting right away. When they ask about prices, booking or a quote, the AI answers first, then asks once for their name and a phone number or email. If they say no, it keeps helping.

Only when needed: the AI asks only to book, to pass a quote or callback request to your team, or when they want a person.

Before the chat starts: visitors fill in a short form (their name, plus the contact details you chose) before they can type. You get details from everyone who chats, but fewer people start a chat, so we recommend it mainly when you must reply by email or phone.

However they gave their details, the chat shows under their name in the Inbox and they're saved on the Customers page. If their details match a customer you already have, with the same name, the chat joins that customer.

Returning visitors: the widget remembers someone who gave their details on that device for 90 days, so they don't fill in the form again and the AI doesn't ask again. The chat shows Chatting as and their first name, with a Not you? link for shared devices.