Hope.Cloud Docs

Appearance

Add a Chat Widget to Your Website ​

A widget is a chat button that floats in the corner of your website. Visitors click it to open a chat panel and message your team. This guide covers creating a widget, styling it, and installing it on your site.

1. Create the widget ​

  1. On the Hope chat tab, click Add new chat.
  2. Upload a thumbnail, enter a Title, and choose Widget.
  3. Click Create. The widget editor opens.

2. Set the website address ​

In the URL section, enter the web address where the widget will run, for example https://example.com. It must start with https://.

This step matters for two reasons:

  • It turns on the widget. The widget only works on the address you enter here (see Where the widget works).
  • It generates your embed code. Until you enter a valid URL, the chat stays in Draft and the embed code is hidden.

As soon as the URL is valid, the status changes to Ready for publishing and the embed code appears. Once the widget is live on your site and receiving messages, it shows as Active. You can change the URL later at any time - your edits save automatically.

3. Style the launcher ​

Make the widget match your brand:

  • Widget color - the theme color of the chat.
  • Widget logo - the icon on the launcher button. Choose your logo or one of the built-in icons (message, chat, dots, smile), in small, medium, or large.
  • Position on screen - which corner the button sits in (for example bottom right), plus a Horizontal and Vertical offset in pixels to nudge it.

4. Copy the embed code and add it to your site ​

Open the Embed code section and click Copy code. You will get a small <script> snippet that looks like this:

html
<script>
  (function(w,d,s){w.HopeChat=w.HopeChat||function(){(w.HopeChat.q=w.HopeChat.q||[]).push(arguments)};
  var j=d.createElement(s);j.async=1;j.src='https://widget.hope.chat/widget.js';d.head.appendChild(j);})(window,document,'script');
  HopeChat('init', { id: 'egpa:2PitDOAL1Ie', apiBase: 'https://api.hope.chat', wsBase: 'wss://api.hope.chat/graphql' });
</script>

Copy it as-is

Your copied snippet already has your chat's ID filled in. Paste it exactly as copied - do not change the id or the other values.

Paste the snippet into your website's HTML, just before the closing </body> tag, on every page where you want the chat to appear. Most site builders and CMS platforms (WordPress, Squarespace, Wix, custom sites) have a place to add a snippet to the site footer or <head> - that works too, and covers all pages at once.

You only need the snippet once per page. It loads in the background, so it will not slow your page down, and it renders in an isolated container, so it cannot clash with your site's own styling.

Where the widget works, and where it does not ​

The widget only runs on the exact website address you set in the URL field. When a page loads, the widget checks in with Hope Chat, and Hope Chat only answers for the address you configured. If the address does not match, nothing appears - no button, and no error on the page.

So the widget will not show up if:

  • the chat is still in Draft (no URL set, so there is no snippet yet);
  • the snippet is installed on a different address than the one you entered (for example you set https://example.com but the snippet runs on https://www.example.com - these count as different sites);
  • the site is not served over https, or the id in the snippet was changed.

To fix it, make the URL field match the address your site is actually served from, then reload the page. Changing only the path (like /contact) is fine - only the domain needs to match.

Where your messages go ​

Replies happen in your normal Engage inbox / Interaction Feed, not on the Hope chat tab. Every visitor message opens a conversation you can answer, and your reply reaches the visitor in real time while their chat is open. Filter the feed by the Hope Chat source to focus on these chats.