Open the chat from your own link or button

Instead of the chat bubble in the corner, your visitors can also open the chat from a link or button on your website – for example “Help & support” in the sidebar or “Question about my plan” on your pricing page. The chat window then opens right next to that element.

No extra code is needed: the regular embed snippet from Embedding the widget is enough. You will also find a copyable example in your account under Project → Embed → Open the chat from your own link.

The simplest case

A link pointing to #rc-open:

<a href="#rc-open">Help & support</a>

Or a button with the data-rc-open attribute:

<button type="button" data-rc-open>Open chat</button>

data-rc-open works on any element, not just buttons. Besides #rc-open, the widget also accepts #reactive-chat as a link target.

The click counts even if the widget has not finished loading yet: the window opens as soon as it is ready.

Where the window appears

• To the right of the element if there is enough room, otherwise to its left. The top of the window lines up with the element.
• Always fully visible: the window is kept inside the visible area and follows the element when the page scrolls or the browser window is resized.
• On narrow screens (less than 480 pixels wide, i.e. most smartphones) the chat opens full-screen as usual. There is no room beside the element there.
• As a side panel: if the chat window is set to a full-height side panel under Appearance, it opens there and not next to the element.
• If the chat is already open, the window moves to the link that was clicked last.
• When the chat closes (including with the Escape key), keyboard focus returns to the link or button that opened it.

To open the window in its usual position in the corner, write data-rc-open="corner". data-rc-anchor="none" does the same:

<button type="button" data-rc-open="corner">Open chat</button>

Pre-fill the message field

With data-rc-message, a sentence is already in the message field when the chat opens. It is not sent – the visitor can add to it, change or delete it, and sends it themselves.

<button type="button" data-rc-open data-rc-message="I have a question about my plan">
  Question about my plan
</button>

Up to 200 characters are used. The chat switches to the conversation tab for this.

Choose a tab

If your chat has several tabs, data-rc-tab decides which one is in front when it opens:

• msg – the conversation,
• home – the start page,
• help – the help articles.

<a href="#rc-open" data-rc-tab="help">Browse help articles</a>

If your chat does not have the tab you name (for example help without any help articles), the chat simply opens as usual.

Open it from your own JavaScript

The same options are available as a call. anchor is the element the window should appear next to; message and tab are optional:

document.querySelector('#my-button').addEventListener('click', function (ev) {
  ReactiveChat('open', {
    anchor: ev.currentTarget,
    message: 'I have a question about my plan',
    tab: 'msg'
  });
});

Without anchor the window opens in its usual position. ReactiveChat('open') without options behaves as before. If the element itself carries data-rc-message or data-rc-tab, those apply to the call as well; whatever you pass explicitly in the call takes precedence.

If your code might run before the embed snippet has loaded, put this line in front of it. Calls are then queued and carried out as soon as the widget is ready:

window.ReactiveChat = window.ReactiveChat || function () { (window.ReactiveChat.q = window.ReactiveChat.q || []).push(arguments); };

No chat bubble at all

If the chat should only be reachable through your own links – say “Help & support” in the sidebar – there are two ways.

In your account: under Project → Appearance → Brand, set Display to Only via your own links (no chat icon) and save. The setting takes effect without any change to your website. Still, copy the embed snippet under Project → Installation again afterwards: the new snippet no longer carries your brand colour, so the chat icon does not flash up while the page loads. As long as the widget could not get your setting from the server – for example without a connection, or on a first visit before the visitor has accepted cookies – the icon still appears as a safety net, so that the chat stays reachable.

On the snippet: if the icon must never appear, hide the chat bubble with data-rc-hide-launcher="true" on the embed snippet. This attribute always applies, whatever is set in your account:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-hide-launcher="true"
        async></script>

Then make sure that every page where visitors should be able to reach the chat has at least one such link.

Troubleshooting

• Clicking only adds #rc-open to the address: the widget is not embedded on this page, or it has not loaded (for example without consent). Check that the embed snippet is there.
• The window opens in the corner instead of next to the link: is there data-rc-open="corner" or data-rc-anchor="none" on the element? Is the browser window narrower than 480 pixels? Is the chat window set to a side panel?
• The text does not appear in the message field: the attribute is called data-rc-message and has to be on the clicked element itself.

The other settings of the snippet are described in Embedding the widget. How to show a card for your own offer inside the chat is explained in The promo card in the chat.