Live chat and the chat widget

Live chat lets visitors talk to you directly from your website. A small widget sits on the page and the assistant answers in real time. When a question needs your team, the assistant passes it on in the ways you choose, and your team follows up by email or by phone. In oHallo the chat widget and the chat channel are the same thing: creating a chat widget provisions the channel behind it, so there is one place to set it up.

Enabling a live chat channel

Go to Settings, then Widgets. The Live chat tab is the first tab on the page.
Select New to create a chat widget. If you have none yet, the empty state offers Create your first chat widget.
Give the widget a display name, for example “Website chat”, and choose the workspace it serves.
Set the widget’s appearance and, if you want, restrict which websites it may load on. See “Widget appearance” below.
Save. The widget is created and the underlying chat channel is active straight away. There are no records to publish and no waiting: the widget works as soon as its embed code is on your site.

A public key is minted when you create the widget. It goes in the embed code and identifies your widget to the platform.

After you create the widget, its detail page shows an Embed snippet: a short piece of HTML to add to your website. Copy it and paste it into your site’s pages, usually just before the closing </body> tag. Your web developer or site administrator can help with this step.

Copy the snippet from your widget detail page rather than from this article. The snippet on that page is generated for your account and already contains the right values.

There are two shapes of snippet, depending on how you want the chat to appear.

Floating or sidebar. The widget renders itself, as a launcher in the corner or a panel from the edge of the page. The snippet is just the script tag:

<script src="https://widget.ohallo.eu/chat.js"
        data-key="your-public-key"
        data-api-base="https://api.ohallo.eu" async></script>

The widget is active as soon as the script is on the page.

Inline. The widget renders inside a section of the page that you choose. Place a container where the conversation should appear, then add the script after it. data-target must match the container’s id:

<div id="ohallo-chat"></div>
<script src="https://widget.ohallo.eu/chat.js"
        data-key="your-public-key"
        data-api-base="https://api.ohallo.eu"
        data-target="ohallo-chat"
        async></script>

Add the script once, in the template every page of your site shares. The chat stays with the visitor from page to page: open or minimised as they left it, and on a site that changes pages without a full page load, with an unsent message still in the box.

If your website sends a Content Security Policy, whoever maintains it adds the two sources listed under Content Security Policy on the developer site.

Opening the chat from a link on your site

A link or button of your own can open the chat: a “Chat with us” line in a page, a button at the end of an article, an item in your menu. Whoever maintains your website adds the control and gives it this one line:

<button type="button" id="chat-with-us">Chat with us</button>
<script>
  document.getElementById('chat-with-us')
    .addEventListener('click', () => window.__ohalloChat?.open())
</script>

When the chat was closed, it opens with the cursor already in the message box, so the visitor can start typing. If it was open already, the button leaves it as it is. window.__ohalloChat?.close() closes it again, and window.__ohalloChat?.isOpen() says whether it is open. With the inline presentation the conversation is part of the page and always open, so a button like this leaves it as it is. The full reference is Embedding widgets on the developer site.

Rotating the public key

The widget detail page has a Public key section with a Rotate key option. Rotating the key invalidates the current embed immediately, so any snippet still using the old key stops loading. After you rotate, update the snippet on your website with the new key. You are asked to confirm before the key changes.

The widget’s appearance is set on its detail page.

Presentation. Choose how the chat shows on the page: Floating (a launcher in the corner opens the chat in a small window), Inline (the chat lives inside a section of the page, with no window around it), or Sidebar (the chat opens as a full-height panel from the edge of the page). Floating is the default.
Position. For the floating presentation, choose Bottom right or Bottom left. This applies only to the floating presentation.
Colour. Pick the accent colour used in the widget, using the colour picker or a hex value.
Suggested prompts. For the inline presentation, you can add a few starter prompts. They are shown before the visitor writes anything; choosing one sends it as their first message.

Under Security on the widget detail page, the Allowed origins field lets you list, one per line, the websites the widget may load on. The chat only loads on those sites. Leave it blank to allow every site.

When a visitor needs your team

What the assistant does when a visitor needs your team is set on the chat channel’s Chat handling tab, under When a visitor needs your team. Open it from Settings, then Channels, and select the chat channel. You can also reach it from the widget’s detail page.

On the tab:

By email. When a visitor asks for a person, or a question needs your team, the assistant passes it on by email. The visitor receives an email from your workspace that says your team has their question, and your team replies to it from Conversations, like any email. When the visitor has not given an email address, the assistant asks for one. By email is on unless you turn it off. It sends from your workspace’s email channel; when the workspace has more than one, from the one chosen under Send follow-ups from in Settings, Follow-ups.
By phone. With this on, a visitor who asks for a call from your team and leaves a phone number in the chat is added to Callbacks for your team to claim.
What your team wants to handle. In your own words, which questions go to your team. The assistant reads them when it decides which questions to pass to your team.

When the assistant passes a question to your team by email outside your opening hours, it tells the visitor when your team is back. The tab shows your workspace’s opening hours, which are set under Settings, Workspaces.

With By email and By phone both off, the assistant keeps helping the visitor itself and marks the questions it could not answer for your team in Conversations.

What visitors see

The widget shows a greeting, a message box, and a clear notice that the visitor is talking to an automated assistant. Visitors can return to the same conversation later; a resolved conversation shows a closing notice, and the visitor can start a new one by writing again. The widget uses the workspace’s operating language.

The chat opens with two optional fields under the greeting, Name and Email. A visitor fills them in or writes a message right away, and what they give goes with their first message. The assistant knows the visitor’s name and email from its first reply, and your team sees the name in Conversations and the email marked “typed by the visitor”, in the conversation header and on the contact page. Once a visitor has given an email in a browser, later chats in that browser open with the greeting and the message box.

The name and email are what the visitor typed, and they prove nothing about who the visitor is. The assistant addresses the visitor by the name, may repeat the email back to them, asks for neither again, and never says or implies whether the email or the name is on one of your customer records. The email opens nothing: a visitor reaches their own records only by verifying in the chat.

With By email on, when your team is needed and the visitor has given no email address, has none on file and has not verified with National eID in the chat, the assistant asks for one, and an email field shows under its message. The visitor sends an address or chooses No thanks. With By phone on too, the assistant may offer a call from your team instead.

When the assistant passes a question to your team by email, its reply says so, and a short notice under the reply records it, with the address your team replies to when the visitor typed it in this chat, and, outside your opening hours, when your team is back. Under the notice, Change email lets the visitor give another address, up to twice and before anyone has written in the email conversation, and a new email goes to that address. When the email could not be delivered, the notice says so, and Change email lets the visitor give another address. The email says your team has the visitor’s question and quotes it; a long question, or one with a link, is mentioned and not repeated. The visitor replies to that email to add details. When a chat that moved to email has been resolved and the visitor comes back to it in the same browser while the chat session there lasts (it ends 6 to 12 hours after their last visit), the chat says the conversation continues by email.

A visitor who prefers not to give an email address keeps chatting with the assistant, and the question shows in Conversations for your team.

When a conversation reaches something that needs a verified customer, the assistant verifies the visitor in the chat itself. See “Identity verification in the chat” below.

Identity verification in the chat

The assistant verifies a visitor with the methods you enable for the chat channel: the email link and National eID. See Setting up identity verification.

With National eID switched on for the chat channel, the assistant’s explanation and a verification bubble arrive together in the conversation. The bubble carries a Verify your identity button that opens a secure verification page in a new tab, showing your workspace name, the request it belongs to, and when the request was started in the live chat. The visitor logs in with their own national eID through the scheme’s own login, and the conversation continues automatically: the answer appears in the still-open chat window.

Two behaviours are worth knowing:

Asking again brings the button back. The bubble is shown live only: a page reload rebuilds the conversation from its messages. When the visitor asks again about the same request, the assistant shows the button again. A button that sits unused lapses after its validity period: on the visitor’s next message the assistant says so in plain language, and when they ask again it issues a fresh button.
Verification unlocks the customer’s own record only. A verification completes when the identity the scheme proves matches the identifier on the record the question is about, so it works only for the person who is the customer on that record. A login by anyone else shows one neutral page and leaves the conversation as it was.

Turn National eID on for the chat channel under Settings, then Verification, on the Channels tab. See Verifying with a national eID for the country setup.

Chat in your inbox

Chat conversations appear in your Conversations inbox alongside email and voice, so you read and reply to them the same way. See Conversations.

When a visitor has left the chat, your team can reply to them by email from the chat itself, to the address on file or the one they typed in the chat. Replying to a website chat says when a reply by email is possible.

When a chat continues by email

A chat passed to your team by email has two linked conversations. On the chat, a Continued by email card shows the visitor’s email and Open email conversation. On the email conversation, a Continued from website chat card offers Open chat, and the header marks the address “Typed in a chat, not confirmed”, or “Replied from this address” once an email has come back from it. The hand-off card on the email conversation reads Handoff: reply to the customer. When it also shows Email could not be delivered, the first email to the visitor could not be delivered.

A chat question passed to your team when there is no way to reach the visitor shows Handoff: no way to reach the visitor on the chat, with Mark handled.

The notification Chat visitor passed to your team tells you when a chat question reaches your team.