Web Chat Connector¶
This page is a reference of all web chat connector settings β the look and feel of the chat window, its input fields, greetings, design and JavaScript API. If you are setting up a web chat from scratch, follow the step-by-step guide Set Up Web Chat; to understand how the connector fits together with queues, time conditions and the rest of the routing chain, see How Web Chat Works.
Inbound Routings/Connectors¶
Warning
It is recommended to first create a corresponding web chat queue before creating a routing/connector so you can pair them in the routing/connector. You can however set up several routings'/connectors' destinations at the same web chat queue.
Go to Settings β Routings β Web chats. You will see a list of your inbound routings/connectors. Each routing/connector corresponds to a separate web chat.
You can view a diagram tree of each routing/connector by clicking the grey Tree button in the Actions column.
Click the Title of a routing/connector to open its details or click Add new to create a new routing/connector. The routing/connector details will open.
Warning
When you are done creating or editing a routing/connector, click Save to return to the routing overview and make sure to click the Apply configuration changes button in the top right corner.
It will take a few minutes for the changes to take effect on your website. If you want to see them immediately, open your website in a new incognito mode window.
Warning
When you set up a new web chat routing/connector, click the blue Get code button at the top of the Preview section in the routing/connector details, copy the code and paste it into your web page.
For further customisation, use the toggle switches under Default values and Events to insert script templates into the code.
If your website uses Google Tag Manager, see Set Up Web Chat β Embedding via Google Tag Manager for a step-by-step walkthrough.
General Settings¶
Title: enter a title.
Description: enter a description.
NPS survey template: select a Net Promoter Score survey template. If you wish to use a NPS survey and have not created a template yet, you can come back and select it later.
CTC queues: select a Click-To-Call queue to use with your web chat. If you wish to use CTC and have not created a queue yet, you can come back and select it later. Make sure your CTC queue is active!
Warning
If you want to use click-to-call without a web chat, go to Click-to-Call Routings.
Next destination: select where the web chat will be routed.
You can select:
- Automessages. Send an automatic message to your customer or offer to switch to click-to-call.
- Terminate. The chat will be offline β select which Terminate option to use.
- Queue. Select which queue the web chat will be routed to.
- Time condition. Decide where the chat will be routed depending on the date/time.
- Decision tree. Route the chat to a chat bot.
User Settings¶
Set up what the customer sees about the agent in the web chat.
Show user's icon: choose whether or not to display the agent's profile picture to the customer.
Show user's name: choose to display nothing (Operator), the agent's Alias or their full name.
Client Settings¶
Set up web chat behaviour.
Info
You can see a preview of your web chat on the right hand side as you edit different settings.
Send previous URLs: see which URLs the customer visited before they got the page with the chat.
Send URL changes: see any changes in URL while the chat is running.
Send draft message: the agent will see customer messages as they are typed, before the customer sends them. Do not enable this if you have not legally resolved displaying client's unsent messages!
Allow sending of transcript: the customer can request a transcript of the web chat.
Clean chat on client: chat data will be removed from the client if the chat is terminated and the customer refreshes/displays the page after the selected time.
Allow file uploads: choose whether to allow uploads from customer, from agent, both directions or to disallow altogether.
Agreement input: choose whether to display an agreement checkbox and whether checking it is mandatory before starting the web chat.
Agreement text: create your own agreement text. If left empty, the text will be "By submitting this form, you agree to the conditions of personal data processing."
Welcome message online: create your own welcome message for when you are online. If left empty, the message will be "To start the chat, enter your contact information."
Welcome message offline: create your own welcome message for when you are offline. If left empty, the message will be "We are not online at the moment, please leave us a message."
Welcome message busy: create your own welcome message for when you are busy. The default message is "We are busy at the moment but we will respond shortly. Please enter your contact information."
Window timeout: choose if you want your chat to stay closed (the customer needs to click it to open it), to open immediately when the customer reaches your website or to open with a certain delay.
Hide on mobile device: choose whether to display the chat on mobile devices.
Hide in offline: choose whether to display the chat when you are offline. If displayed, customers can send you a message that you can answer later β in this case we recommend to make email input mandatory (see below) so you have a way of getting back to the customer. Select Hide only chat to display click-to-call only (if using).
Behaviour in overload: choose how the chat should be displayed when no agents are available.
Hide in overload: choose whether to display the chat when no agents are available. Select Hide only chat to display click-to-call only (if using).
Client disconnection: number of seconds after which the webchat will remain live when a connection is lost. From 60 to 3600 seconds.
Allowed numbers: enter a regular expression for phone numbers that the customer can enter into the form.
Webchat Management with JavaScript¶
When you use the new snippet from the "Get Code" option in webchat routing or adjust an older snippet to set daktelaWeb as a global variable, you can manage the webchat more dynamically through JavaScript. This allows you to reinitialise the webchat with different configurations or visually remove the webchat interface from the page anytime. The following methods are available for these actions:
- daktelaWeb.init(daktelaGuiConfig); β Restarts the webchat with any settings you specify in daktelaGuiConfig, an object containing configuration parameters. For more details, refer to the "Get Code" button in the webchat routing section.
- daktelaWeb.destroy(); β Ends an active chat session (if any) and removes the webchat window from the HTML. Note that this does not fully delete the webchat from the page, as you can reinitialise it at any time by calling daktelaWeb.init.
Default Inputs¶
Select what the customer can/must enter while you are online and offline. All selections are mandatory.
Name input: customer's name or company name.
Email input: customer's email address. The field will be validated to contain text before and after "@" and before and after "." β text@text.text.
Phone input: customer's phone number. The field will be validated to contain numbers only.
Message input: message from customer. If not displaying, customers can enter a message when the chat starts.
Custom Inputs¶
If you would like to use different inputs, you can set them up in this section.
Title: type your custom input title. The customer will see this β we recommend to use an imperative such as "Please enter your address".
Name: will be filled in automatically from the title.
Format: choose Text, Phone, Email or Integer.
Online and Offline: choose when to display the custom input and whether it is mandatory.
Greetings¶
A welcome message will appear above the webchat, drawing your attention to it. You can have a different greeting on each page of the site β just fill in the URL pattern field.
Bubble title: enter the title of your greeting bubble. This text will be in bold at the top of the greeting.
Bubble timeout: select if you want your greeting bubble to stay closed, to open it immediately when the customer reaches your website or to open it with a certain delay.
Bubble text: enter the main body of your greeting.
Bubble image: enter the full address of the image you would like to use in your greeting.
Url pattern: if you only want to display the greeting on a specific page, enter its relative URL here.
Design¶
Set up how your web chat will look.
Html holder: the html element CSS selector where the chat will be placed. If left empty, BODY will be used.
Window design: select a design. Only one default design is available. Use the blue + button to create your own design.
Enter your new design title.
You can add CSS styles or change translations directly in the Create new design window (see the tooltips directly in Daktela to guide you).
If you want to change whole files, first save your new design and reopen it by clicking the blue drop down button and selecting Update. Download the Translation, Template, Style and/or Script files, edit them to suit your needs, and re-upload them.
Warning
A disadvantage of using custom design files in your template designs is that any changes made in a Daktela upgrade will not be applied, meaning that new functionalities, potential bug fixes and other changes to the web chat logic will not be applied. When using own files, it is necessary to manually check the differences in the old and new version of the template after an upgrade. If you are able to achieve your design using CSS, we recommend using the Add styles field rather than using Custom files.
Button type: select Bookmark (minimised chat) or Icon (small and round).
Window position: left or right.
Widow tint: select your preferred design β see the changes in the preview window.
Window rounding: 0 = square, 50 = max. rounding.
Window shadow: 0 = no shadow, 50 = max. shadow.
Window colour: select a colour from the palette or enter a hex code.
Allow font: select No to use your website's font in the chat.
Automessages¶
Send automatic messages to customers while they wait in the queue, or offer them a switch to click-to-call. Automessages are shared across channels and are described in Automessages; for web chats they live in Settings β Routings β Web chats β Automessages.
Time Conditions¶
Route the chat to different targets depending on the date and time β typically your business hours. Time conditions are shared across channels and are described in Time Conditions; for web chats they live in Settings β Routings β Web chats β Time conditions.
Decision Trees¶
Build a chatbot directly in Daktela that guides the customer through predefined questions and answers. Decision trees are shared across channels and are described in Decision Trees (including a full worked example); for web chats they live in Settings β Routings β Web chats β Decision trees.
Chatbots¶
Connect a third-party chatbot to your web chat. Chatbot connections, including the structure of the data exchanged with the bot, are shared across channels and are described in Chatbots; for web chats they live in Settings β Routings β Web chats β Chatbots.
Terminate¶
Define how your web chats end in different scenarios β the disconnection cause, an automatic response and whether the chat counts as answered or missed. Terminate targets are shared across channels and are described in Terminate; for web chats they live in Settings β Routings β Web chats β Terminate.
Technical Information¶
The web chat is made up of the following components:
- Initialisation β available in the routing details, pasted into the client website
- JS/CSS/HTML control script that the initialisation downloads from the PBX/proxy every time. The control script already contains any own templates or settings from the web chat routing details.
The Daktela web chat doesn't use cookies β it saves all required data in localStorage or sends requests directly to the server. Sent or received messages are not stored on the client side. The Daktela web chat doesn't contain or use any third-party libraries or scripts and doesn't use any identification methods for marketing or other purposes. Currently we use two localStorage keys that are necessary to run the web chat:
- daktelaWebGUIState β contains the display state of the web chat made by the customer or their browser, e.g. open/closed chat window, number of unread messages (this is needed to keep the chat state the same on all website pages).
- daktelaWebCliState β contains the state of the current chat, e.g. that the chat is currently ongoing (this is needed to communicate with the server) and the display settings loaded from the server, e.g. the chat window colour or whether attachments are allowed (this is needed to display the chat).