Admin Guide

Chat embed


You can embed the chat widget on your website to offer chat to users without the need to visit the portal.

Warning

By default, the chat widget will not be displayed unless an agent is logged in to chat within the agent interface.

To embed the chat widget:

  1. Go to Chat > Site Widget & Chat.
  2. In the Button Settings section, customise the design of the chat button which is displayed when the widget is collapsed. Changes you make are instantly previewed in the box to the left.
  3. In the Chat Settings section, set the options you want for the widget. See Live Chat section for details.
  4. Once you have finished setting options, click Get Code.
  5. Copy the code in the box below the Get Code button onto the page(s) on your website where you want the chat widget to appear. We recommend putting the code just before the </body> tag.

If you want to apply the same settings and design changes you have just made to the embedded chat widget to the version on the user portal, click Apply chat widget to the portal.

Custom chat button

If you want to use your own custom HTML element/button to launch the chat widget on a page, add the special classname dp-chat-trigger to it. For example:

<button class="dp-chat-trigger">Start chatting</button>

CSS classes to create actions on widget events

You are able to run different actions if chat is available or unavailable to the public.

dpwidget-show-on-loaded
dpwidget-hide-on-loaded
dpwidget-show-on-available
dpwidget-hide-on-available
dpwidget-show-on-unavailable
dpwidget-hide-on-unavailable

# to open the widget on click
dpwidget-open
dp-chat-trigger

Some examples of use of the above are here:

<button class="dp-chat-trigger dpwidget-show-on-available" style="display: none">Start chat</button>

That is a manual chat button you can embed on the page - which on click, opens up the chat window to begin a chat. It also will only appear if agents are online.

Removing chat from the portal only

If you want to disable chat on your portal, but keep the chat embed working on other sites, use theRemove chat widget from the portal button at the bottom of Chat > Site Widget & Chat.

Signing the chat widget with a JWT token

At the bottom of the "Get Code" box is a section where you can define a JWT token. JWT is a way to cryptographically sign some data so the system knows the data can be trusted (i.e. it was not tampered with).

There are two use-cases for using a JWT signing:

  • You have internal pages on your site and you want to set the user on a chat as if they were logged in. For example, maybe you have an internal members area and you want your users to raise chats. You can set the email address on the chat, sign it with JWT, and then the chat widget will act as though that user was logged in.
  • The second use-case is when you want to control where the widget can be installed to by requiring JWT signing. This would prevent, for example, someone copying the chat code to put on an arbitrary site.

Using JWT signing

Within the chat widget code you copy from the "Get Code" section is a declaration for options. Specify a jwt property here containing your encoded token.

For example:

window.DESKPRO_WIDGET_OPTIONS = {
  //...
  "jwt": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJlbWFpbC...trucated"
};

You will need some kind of server-side scripting to generate the token with your secret. The JWT website has lots of information with a variety of libraries.

Here's an example using php-jwt:

<?php

use \Firebase\JWT\JWT;

$token = JWT::encode([
	"exp": time()+3600,       // expiry -- token wont work after this time
	"email": "foo@bar.com",   // the email of the user
], "my secret key");
?>
...
window.DESKPRO_WIDGET_OPTIONS = {
	...
  "jwt": "<?php echo $token; ?>"
};

The payload (array of data) in the token can be anything (even empty). The following are supported:

  • Recommneded: exp field, which is a timestamp representing when the token expires
  • email -- the email address of the user you want to make the chat belong to. Note that since this value is signed by you, it is trusted. It's as if this user were actually logged-in to the chat.
  • name -- The name of the user. This will be set on the user if their account in Deskpro doesn't already have a name.
  • person_id -- If you know the person ID of the person you want to set specifically, you can use that instead of the email address.

Comments (0)

Add a comment

Add a comment

You need to log in before you can submit a comment.

Need a password reminder?