Website widget

The website widget puts your agent on your own website, so visitors get answers without leaving the page. You set it up once: choose a style, list the websites it may appear on, publish, and paste a small piece of code into your site.

Where to find it: open your agent and go to Playground. Under Preview channel, choose Chat Bubble or Center Stage, then select Publish → Website widget.

How it works

Website channels don't need an outside account, so there's nothing to connect. Instead, you tell Hourzero which websites are allowed to show your widget.

1. 1StylePick Chat Bubble or Center Stage and style it in the Playground.
2. 2AllowList the websites that may show the widget.
3. 3PublishMake your saved draft live for visitors.
4. 4Add the codePaste one short script into your website.

You only paste the code once. After that, every change you publish shows up on your website automatically.

Choose a style

Chat Bubble is the best choice for most websites. It's always there but never in the way. Center Stage suits pages where the chat is the main event, like a help center or a landing page.

You can publish both. Each style has its own look, its own allowed websites, and its own code.

Style the widget

1. Open Playground and choose Chat Bubble or Center Stage under Preview channel.
2. On the Display tab, set the Display name, Welcome message, colors, and Suggested prompts. For Chat Bubble, you can also choose a Launcher position (Bottom right or Bottom left) and a Launcher icon.
3. On the Overview tab, choose whether visitors may send files (File uploads) and speak their questions (Voice transcription).
4. Select Save draft.
5. Select Preview to open the widget with your current settings in a new tab.

The Playground guide explains every style option.

Allow your website

Allowed domains are the websites that may show your widget. This stops other people from copying your code onto their own sites. If the list is empty, the widget won't appear anywhere.

1. In the Playground, select Publish → Website widget. The Deploy to your website dialog opens.
2. Under Allowed domains, type one website address per line, without https:// or page paths.
3. Wait for Saved to draft to appear under the box.

Each line must match the address visitors see in their browser. Here are some examples for Acme:

So if your site works both with and without www, add both lines:

acme.com
*.acme.com

You can add up to 50 domains. Don't add page paths like acme.com/help: the widget is allowed on a whole website, not on single pages.

Publish the widget

1. Make sure your Playground changes are saved with Save draft. You can't publish while there are unsaved changes.
2. Check that Agent replies is on (Replies on after publishing) on the Overview tab.
3. Select Publish → Website widget.
4. Select Publish saved draft. The next time you publish, the button says Publish latest draft. A message confirms the channel is published.

Publishing only updates the style you have open. If you use both Chat Bubble and Center Stage, publish each one.

Add the code to your website

1. In the Deploy to your website dialog, under Install the widget, select Copy code. You'll see Embed code copied.
2. Paste the code on your website just before the closing </body> tag. Most website builders have a site-wide setting for this, often called custom code, footer code, or code injection. Use the site-wide option, so the widget appears on every page.
3. Save or publish the change on your website.

Your code looks like this. Always copy your own from the dialog, because it contains your agent's ID and the style you chose.

<script
  src="https://hourzero.dev/embed.js"
  data-agent-id="acme-support"
  data-channel="chat-bubble"
  defer
></script>

The data-channel line decides the style: chat-bubble or center-stage. To switch a page from one style to the other, copy the code from that style's dialog.

Test it for real

1. Open your website at one of the allowed addresses. A private browser window helps you see what a new visitor sees.
2. Look for the chat bubble in the corner, or the chat bar at the bottom. It can take a few seconds to appear.
3. Ask a real question, for example "Do you ship to Canada?".
4. In Hourzero, open Activity → Conversations and select Visitors. Your test chat appears there.

Messages on your live website are real conversations, so they use credits.

Update the widget later

You don't need to touch your website again. Change the look, instructions, or knowledge in Hourzero, select Save draft, and then select Publish → Website widget → Publish latest draft. Visitors get the new version the next time they load a page.

To take the widget offline, turn off Agent replies on the Overview tab, save, and publish. The dialog warns you that publishing will turn off the live widget.

Website actions

Some custom actions can run on your own website, for example looking up order 48213 in the shop the visitor is signed in to. These actions only work in the installed widget on your site, not in the Playground or in messaging apps. Ask your developer to follow the custom action guide.

Troubleshooting

The widget doesn't appear on my site

Work through these in order:

• Is the address allowed? The page's address must match a line in Allowed domains exactly. acme.com doesn't cover www.acme.com.
• Did you publish after changing the domains? Domain changes stay in your draft until you publish.
• Is the code on that page? Ask your developer to check that the script is in the page, or paste it again in your site builder's site-wide setting.
• Are replies turned on? Check Agent replies on the Overview tab, then publish.

If the widget can't load within 30 seconds, it removes itself quietly so your page isn't affected. Your developer will see the message "Hourzero: widget unavailable" in the browser's developer console.

It works on one address but not another

Add each address separately. For example, add acme.com and *.acme.com to cover both acme.com and www.acme.com. Remember staging or test addresses too.

My changes don't show up

Select Save draft, then publish the style you changed. Chat Bubble and Center Stage are published separately. Then reload your website.

My site's security settings block the widget

Some websites only allow scripts and embedded frames from approved addresses. Your developer needs to allow the Hourzero address in your code (for example hourzero.dev) for both scripts and frames. Publishing again won't fix this; it has to be changed on your website.

Next steps