The promo card in the chat

The promo card lets you show your own offer inside the chat window – typically your paid plan. It consists of an image, a headline, a short text, a large button and a text link below it. It appears at the top of the conversation, on the chat’s start page, or in both places.

The card is not a message: it does not appear in the conversation history your team sees, and visitors cannot dismiss it. The button and the text link open their target in a new tab.

Setting it up

You will find the promo card in your account under Project → Appearance → Promo card. The chat preview on that page shows the card while you type.

• Headline – required, up to 80 characters.
• Text below – optional, up to 200 characters.
• Image – optional, an address starting with https://. Without an image the card is text only.
• Button text – required, up to 40 characters, for example “Try 30 days free”.
• Button link – required, the page the button leads to.
• Text link – optional, up to 60 characters, for example “See all plans”. If you add a text link, a link target is required too. The widget adds the arrow at the end itself.
• Own colour for button and accent – without the tick the card uses your brand colour. The button label is set light or dark automatically so that it stays readable.
• Where the card appears – “In the conversation, at the top” and/or “On the start page”. The start page has to be switched on for the latter.
• Who sees it – all visitors, or only visitors who are not identified (see below).

Use addresses starting with https:// for the button link and the link target. The widget only shows the button and the text link with an https target.

The card can only be switched on when it is complete: with a headline, button text, button link and at least one placement. If something is missing, it is saved as a draft and your account tells you what is missing.

The texts apply in the project’s default language. After you save, it takes up to a minute until your visitors see the change.

Hiding the card from paying customers

Customers who already pay don’t need an ad for your paid plan. reactive.chat does not know your users’ plans – your site does. There are three ways to handle this.

1. Audience “Only visitors who are not identified”. If your site already signs users in with ReactiveChat('identify', …) (with userId or email), those users no longer see the card. That is enough if only paying customers have a login with you.

2. One line in your page script, as soon as you know the user pays:

ReactiveChat('promo', false);

If this line might run before the embed snippet has loaded, put this in front of it:

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

3. An attribute on the embed snippet, if your server delivers the page differently to paying customers anyway:

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

Both switches apply only to the page they are on, and only to that page view. ReactiveChat('promo', true) shows the card again as configured in your account.

Adjusting the card per page

Instead of true or false you can pass an object. Its fields replace the account settings on this page; anything you leave out comes from your account.

ReactiveChat('promo', {
  titel: 'Annual plan: 2 months free',
  knopf: 'Switch now',
  ziel: 'https://www.your-domain.com/pricing?annual=1'
});

The field names are the same as in the account (they are German):

• titel – headline (up to 80 characters),
• text – text below (up to 200 characters),
• bild – image address starting with https://,
• knopf and ziel – button text (up to 40 characters) and button link,
• link_text and link_ziel – text link (up to 60 characters) and its target,
• farbe – own colour as #rrggbb,
• orte – a list of "gespraech" (in the conversation) and "start" (start page); if neither the object nor your account sets it, ["gespraech"] applies,
• zielgruppe – "alle" (everyone) or "anonym" (only visitors who are not identified).

You can also give texts per language, for example titel: { en: 'Annual plan', de: 'Jahrestarif' }. Longer texts are shortened.

An object shows the card on this page even if it is switched off in your account. In that case, provide everything yourself: at least titel, and for a button also knopf and ziel.

Impressions and clicks

In your account, below the promo card, the Performance section shows impressions, clicks on the button and on the text link, and the click rate – summed up for the last 7 and 30 days and per day. Per visitor and day, at most one impression per placement and one click per target are counted. Your preview in the account does not count, and neither does a card shown only via ReactiveChat('promo', {...}) while it is switched off in the account.

Events for your own analytics

In addition, two events in your page script report what happens to the card – for example to pass them on to your own analytics tool.

ReactiveChat('on', 'promo:shown', function (e) {
  // e.ort: "gespraech" (conversation) or "start" (start page)
});

ReactiveChat('on', 'promo:click', function (e) {
  // e.ziel: "knopf" (button) or "link" (text link), e.ort: "gespraech" or "start"
});

promo:shown fires once per placement and page view, and only once the chat window is open with the card in it. Nobody has seen a card inside a closed chat. promo:click fires on every click on the button or the text link.

If the card does not appear

• Is it switched on? An incomplete card stays a draft.
• Up to a minute passes after saving before visitors see the change.
• Placement “start page”: is the chat’s start page switched on?
• Audience “not identified”: if your site signs the visitor in with ReactiveChat('identify', …), they do not see the card.
• Switched off on this page? Look for data-rc-promo="false" on the snippet and for ReactiveChat('promo', false) in your scripts.
• Button or text link missing: the target does not start with https://.

How to open the chat from a link or button on your own site is described in Open the chat from your own link or button. The basics of embedding are covered in Embedding the widget.