Help Center

English (GB) Nederlands
Search the Help Center
  1. Spotler Engage
  2. Settings
  3. FAQ's

Articles in this section

See more

How do I link a live chat?

You link a Live chat via Settings > Accounts > Button: Link account. Then choose Live chat. Is this option not visible? Contact support, this is an additional feature that must be enabled specifically for your environment.

If you choose the live chat channel, we will create a chat widget for you. You will receive a widget code that you place on the desired website (or have placed). The website visitor asks a question via this widget, which then enters a stream in Webcare.

You will find the following information in this article:

Link live chat

You link a Live chat via Settings > Accounts > Button: Link account. Then choose Live chat. Is this option not visible? Contact support, this is an additional feature that must be enabled specifically for your environment. After selecting the type of account, a few fields will appear:

  • Name
    The name of the chat is visible when the chat is collapsed on the site. Here you can set a name or even a phrase to trigger visitors to start a chat, such as: "Start chat, we're here to help!"
  • Title and Subtitle
    When the chat is opened by a visitor to your site, a logo, title, and (optionally) a subtitle appear at the top of the chat screen. The title is in bold and can be filled with a short phrase, such as "Welcome to OBI4wan". The subtitle is placed directly below and can contain a question, for example: "How can I assist you?".
  • Colour and Logo
    The colour of the chat screen is displayed when the chat is still collapsed, and when the chat is expanded, it is visible in the top bar of the screen. The logo is displayed in the top left corner when the chat is expanded. Need more options? See our advanced widget customizations.

Implement live chat script on your website

Implementing the script

The chat widget can be implemented in various ways. There are no specific instructions; Spotler provides only the script. It's up to you to determine where to install the script to make it operational. Below are some examples of what you can do:

  • Directly in the HTML code of your website
    This script should be added to the HTML code of the web pages where you want to display the live chat. This is often done in the <head> or <body> section of the page.
  • Through a Content Management System (CMS)
    If you are using a CMS like WordPress, Joomla, or Drupal, there are often special plugins or extensions available for live chat services. These can simplify the installation process by including the necessary scripts without the need for direct code manipulation.
  • Using a Tag Management System (TMS)
    Sometimes, the live chat script is implemented through a Tag Management System such as Google Tag Manager. This provides a central location to manage and add various scripts and tags to your website without the need to modify your site's source code.

Advanced widget customizations

In Engage you only change the main color. Want a more personalized widget? Ask your web builder to use the code below to customize your widget. Add it to the widget script.

use data-config="true":

<script id="obi-chat-launcher"

    src="./obi-launcher.bundle.js"

    data-guid="copy_paste_the_livechat_guid_here"

    data-config="true"></script>


example color change:


const chat = OBI.chat({

widgetStyle: { color: "#489ad5", textColor: "#000" },

...

Live chat settings

Live chat settings: Availability

Calculate Based on Opening Hours and Agent Availability

With this setting, the following logic is applied for displaying or not displaying the Livechat widget on the website where it is implemented. The agent must be actively set to 'online and available for live chat' (the blue dots). If no agents are available, the live chat will not be accessible.

Please note! This setting is not applicable to a chatbot, only to live chat.

Calculate Based Only on Opening Hours

Based on the opening hours, the live chat will be visible on the website. Scroll down to Opening Hours to set them up.

Calculate Based Only on Opening Hours and the Number of Open/Assigned Messages

Using the chat claim settings, you can use this option to hide the live chat when the maximum number is claimed. At Accounts > Live Chat > General Settings > Chat Claim Settings, set the maximum number.

Live chat settings: Technical Settings

You can configure the widget outside opening hours when agent(s) are unavailable by choosing between two options: 'Hide the widget on the website' or 'Use an email form.' The first option will hide the live chat from the website, while the second option places an email form for gathering information.

I only see the username in the widget, how can I change this?
Choose 'Display name in widget' and select 'First name only' to display only the first name in the Livechat Widget.

Live chat settings: General Chat Settings

Under the maximum number, you can set how many chats an agent can claim at most. When this limit is reached, no agent is available, and the widget will disappear from the website or the email form will appear.

Please note! Don't forget to set the Chat Availability setting to 'Calculate Based on Opening Hours and the Number of Open/Assigned Messages.'

Please note! You need to activate multi-claiming in the respective stream to enable this setting (continue reading).

Live chat settings: Webcare Stream Settings

In the stream settings, you need to activate multi-claiming in general settings so that the claim setting can be activated. Navigate to the settings and click on the gear icon, activate multi-claiming under general settings. The display of the stream will now be divided into 'My Conversations' and 'Open Conversations.'

Please note! Depending on your widget display on the website, check the settings under Chat Availability and set the option to 'Calculate Based on Opening Hours and the Number of Open/Assigned Messages.'

Possible solutions if the chat is not showing

✅ Check if live chat is not manually disabled in the settings.
✅ Is the current time within the widget's opening hours?
✅ Is at least one agent 'online and available for live chat'?
✅ Has this agent claimed less than the maximum number of chats set?
✅ Check the status of the agents.
✅Ensure that the agents who will be chatting set their status to 'Online and available for live chat.' When this is done, the agent will be counted as available. Please note! This affects the widget's display if the Chat Availability setting is set to 'Calculate Based on Opening Hours and Agent Availability.'
✅ Make sure the latest version of the OBI Engage live chat widget code is on the website(s).
✅ The correct chat code for the website and the correct, unique GUID can be found in the settings of the live chat account.

Problems due to CSP security (Content Security Policy)

In principle, our chat widget works on any website. However, if you are using Content Security Policy (CSP), some parts may not work. In order to lower the security level and get the live chat working normally again, adjustments are required. However, we understand that these adjustments are not always possible due to the security requirements of their systems.

Basic solution

Whitelisting *.pusher.com, *amazonaws.com and *.obi4wan.com is sufficient.

Advanced solution

For a fully functioning livechat, the following attributes must be allowed:

Mandatory

- script-src https://cloudstatic.obi4wan.com;

(Required for loading the widget launcher.)

- connect-src https://cloudstatic.obi4wan.com;

(Necessary for loading widget scripts, settings and agent availability.)

- connect-src https://chatapi.obi4wan.com;

(Needed for authentication against Pusher.)

- connect-src wss://ws-eu.pusher.com;

(Necessary for connection to pusher, the real-time communication channel between agent and website visitor.)

- img-src data:

(Needed for the images we use, such as the chat balloon in the launcher button, these are loaded embedded).

- style-src 'unsafe-inline';

(The styling of the widget is loaded embedded and is therefore covered by unsafe-inline).

Optional

- connect-src https://obipubvideo.s3.eu-central-1.amazonaws.com;

(Required for uploading media, optional if you do not wish to use it).

- img-src https://s3-eu-west-1.amazonaws.com

(Necessary for displaying agent avatars, optional if not desired and/or not set).

- img-src https://obipubvideo.s3.eu-central-1.amazonaws.com

(Needed for sending images from the agent to the widget).

If the steps above don't solve the problem, you can take a look at the domain of DigiD. If you use DigiD on your Web site, some customers have had success by moving the DigiD link to another domain, thus eliminating the strict security requirements. It may be worth discussing this with your web page developer and seeing if this is a viable solution for your situation.