Website widget

The website widget puts a "chat with us on WhatsApp" button on your own website. A visitor clicks it, sees a short greeting card, and taps through to WhatsApp with a message already typed in. Once they send it, the conversation lands in your Inbox like any other, on the WhatsApp number you chose for the widget.

You install it by pasting one line of code into your site. After that, everything else (the look, the text, which pages it shows on) is changed in RelayOne, with no further edits to your site.

Create a widget#

The install snippet#

Every widget has its own snippet. It looks like this:

<script src="https://app.relayone.io/widget.js" data-widget="wid_xxxxxxxxxxxxxxxx" async></script>

data-widget holds the widget's ID, which is the only part that differs between widgets. Copy the snippet from the widget's Install box rather than typing it, so the ID is right.

Paste it once per page. It is safe to put it in a template that appears on every page: if the same widget is included twice on one page, only one button shows.

Add the snippet to your site#

The snippet goes in the same place whichever tool built your site: somewhere that is loaded on every page where you want the button. Paste it just before the closing </body> tag where you can, or in your platform's "footer" code box.

Plain HTML#

Open each page's HTML (or the shared layout file, if your site has one) and paste the snippet on its own line immediately before </body>.

WordPress#

Either of these works:

• A header and footer plugin. Install a plugin that adds code to your site's header or footer, open its settings, and paste the snippet into the footer box.
• Your theme. In the theme's footer.php, paste the snippet just before </body>. Use a child theme, or the plugin route, so a theme update doesn't wipe it out.

Shopify#

Add the snippet to your theme, so it shows on every page of your online store:

1. In your Shopify admin, open Online Store → Themes.
2. On your live theme, click … → Edit code.
3. Open layout/theme.liquid.
4. Paste the snippet on its own line immediately before </body>, then click Save.

This is separate from the order and shipping messages described in Shopify integration. You don't need to connect a store to use the widget.

Wix#

Open Settings → Custom Code in your site's dashboard, choose Add Custom Code, paste the snippet, and set it to load on All pages in the Body - end position.

Squarespace#

Open Settings → Developer Tools → Code Injection and paste the snippet into the Footer box. Code injection needs a Squarespace plan that supports it.

Google Tag Manager#

1. In your container, create a new Tag and choose Custom HTML.
2. Paste the snippet into the HTML box.
3. Set the trigger to All Pages, then Submit and Publish the container.

Tag Manager is a good fit if your marketing team already manages scripts there. The widget works the same, but a visitor with a tag blocker may not get it (see Troubleshooting).

Options explained#

Allowed domains#

The sites the widget may appear on. Leave it empty to allow any site.

• acme.com allows acme.com. A leading www. is ignored, so it also allows www.acme.com.
• *.acme.com allows every subdomain, such as shop.acme.com, but not acme.com itself. List both if you need both.

If the snippet is pasted onto a site that isn't on the list, the widget quietly shows nothing. Use this to stop someone else copying your snippet onto their own site.

Page targeting#

Choose which pages show the widget with include and exclude page patterns. A pattern is a path, and it must match the whole path (capital letters don't matter):

Rules:

• * stands for any text within one part of the path. It never crosses a /.
• ** as a whole part of the path stands for any number of parts, including none.
• Exclude wins. A page matching any exclude pattern never shows the widget, even if it also matches an include pattern.
• Empty include means all pages. Add include patterns only to restrict the widget to those pages.
• Patterns look at the path only. Query strings (?ref=ad) and # anchors are ignored.

You can also choose to show the widget on desktop, on mobile, or both.

Auto-open#

Set an auto-open delay (in seconds) and the greeting card opens by itself after that long, instead of waiting for a click. It opens once per browser session: after it has opened, it won't pop open again on the visitor's next page until they start a new session. Leave it empty for no auto-open.

To remember this, the widget stores one flag in the browser's sessionStorage. See Privacy and cookies.

Business hours#

Turn on Respect business hours and the widget follows the business-hours schedule of the number it is bound to. That is the number's own schedule if it has one, otherwise your account's default schedule. Both are set in Settings → Helpdesk → Business hours. If there is no schedule at all, the number counts as always open.

When the number is closed, you choose what visitors see:

• Hide: the widget is not shown at all outside your hours.
• Note: the widget still shows, and the greeting card carries an off-hours note (for example "We're away right now. Leave us a message and we'll reply when we're back."). You can edit the note.

Prefilled text and {page_url}#

The prefilled text is the message that appears already typed in WhatsApp when the visitor taps through. They can still edit it before sending.

Put {page_url} anywhere in it and RelayOne replaces it with the address of the page the visitor was on when they clicked, so your team can see what they were looking at. For example:

Hi! I have a question about this page: {page_url}

Auto-tag#

Pick a tag and RelayOne adds it to the contact when a new conversation starts from this widget. The tag is added once, and only if the contact doesn't already have it.

Adding the tag also fires the Tag Added automation trigger for that tag, so you can build an automation that reacts to chats from this widget, such as a welcome reply or assigning the conversation. A Tag Added automation is set up for one tag, so give each widget (or group of widgets) the tag its automation listens for.

How attribution works#

RelayOne tells which widget started a chat by comparing the first message of a new conversation with the widget's prefilled text. When they match, the conversation is linked to that widget and the auto-tag is applied.

The match is forgiving about capital letters and extra spaces, and when the text contains {page_url}, the link can be any web address. A visitor who adds a sentence at the end of the message still matches.

A widget with no prefilled text never attributes anything, because there is nothing to match.

Troubleshooting#

The widget isn't showing on my site. Check these causes:

A chat didn't get the tag. Attribution needs a brand-new conversation whose first message still matches the prefilled text. See How attribution works. The tag is also skipped if the contact already had it.

I changed the text but visitors still see the old one. The same delay applies: allow up to 5 minutes, then reload the page.

Privacy and cookies#

The widget does not set any cookies, does not use localStorage, and does not give visitors an identifier. The only thing it stores is the once-per-session auto-open flag in sessionStorage, which is cleared when the tab is closed. If the browser blocks storage, for example in some private modes, the widget still works. RelayOne only learns who a visitor is if they send you a WhatsApp message.