Deskpro Messenger is supported on Web, iOS, and Android. This setup guide will walk you through installing web versions of Messenger.

Installing the messenger your widget on your Help Center is as simple as switching a toggle ON. However, if you wish to add the messenger widget to your personal website, then you will need to manually install it using the code snippets we provide.

Getting Started

Go to Admin > Channels > Messenger (Beta). Once there, you’ll see a menu expand in the nav bar with options to go to Messengers, Chatflows, or Routing. To setup your first messenger, Click on Messengers.

To create a new messenger, click on the + New button

Setup Tab

Give your messenger a name, choose which platform you’d like to deploy it to (in this case, Web), and lastly, select the brand you wish this messenger to be used for. Once you’re done, click on Save and Continue Setup.

Once you click Save, you’ll see that you can select the messenger widget’s default language, as well as other languages you’d like to support through translations. Note: you will need to install additional language packs in order to see them populated on this page.

Once you’ve configured the messenger widget’s language, click on the Messenger tab below the messenger’s name to continue setup.

Messenger Tab

The Messenger Tab allows you to configure which individual features you want to include in you widget. Each of the individual features you can add to a widget are called “Cards.”

When customizing your messenger widget, you have the option to choose whether you want a simpler approach to the widget with Messaging Only Mode, or whether you want a more feature rich experience through Card Mode.

The two modes Deskpro supports have the following use cases:

1. Messaging Only Mode: Allows users to send and receive messages to your agents, and view message history.

2. Card Mode: Includes a home page, messaging, help content, news, advanced styling, and more.

Messaging Only Mode

There are two cards that can be configured in Messaging Only Mode.

1. Message card: Allows user to start a conversation with an agent

2. Message History card: Allows user to view and return to previous conversations with agents

Once cards have been added, then you will see a preview of your configured widget appear in the preview panel. Additionally, if you wish to disable a card, flip the toggle on the left of the card. If you wish to delete or rearrange a card, use the functions to the right of the card.

Card Mode

Card Mode allows you to have multiple tabs within your widget for different functions. With Card Mode, you can customize your widget with the following features:

1. Home Tab

   Here you can customize a central place on your widget that can contain help center content, news content, and messaging. You can also style the home page to match your branding by adding logos, background colours/images, and greeting messages.

2. Help Tab

   Here you can enable users to browse and read your Help Center content all within the widget itself. You can pin certain articles you wish to highlight, or pin Knowledgebase categories you know your users browse frequently.

3. News Tab

   The News Tab allows your users to browse and read your latest news content, whether it be release updates, announcements, or latest developments. News posts are ordered chronologically so you know the latest updates are in reach of your users.

Styling Tab

The styling tab provides you with the ability to customize your widget.

In Messaging Only Mode, you can only set the action color, however in Card Mode, you can customize your widget’s home tab background with solid or gradient colors, background images, and icons, as well as change the action color.

Additionally, you can configure you Messenger’s placement on computer’s and tablets. This can be done either by utilizing the Left or Right positioning buttons. If you require a bit more precision, you can offset by pixel height as well.

Lastly, if you are on a Professional or Enterprise plan, then you have the option to remove the “Powered by Deskpro” branding footer. If you are on a Team plan, this setting is locked and cannot be changed unless you upgrade.

Once you have configured your widget’s styling and positioning, you can click on the Launcher Tab to configure how your widget’s launcher button should look.

Launcher Tab

The launcher button allows user’s to hide and open the widget. There are two states that can be configured for the Launcher Button:

1. Button: Shows messenger in a collapsed state by default as an icon that a user then needs to click on to open.

2. Proactive Chat: Encourages customers to start a chat by directing their attention to a widget with a customizable message (Coming Soon!)

You can customize what your Launcher Button looks like. We have provided default icons and we also support uploading your own. Lastly, you can also customize the background color of the Launcher Button.

Once you have configured your widget’s launcher button, you can click on the Deployment Tab to get your widget out in the world!

Deployment Tab

Messenger Installation Status

The Messenger Installation Status detects the first time your messenger has been deployed successfully to your Help Center or Website.

As soon as your messenger widget is opened wherever you’ve deployed it and Deskpro first detects it, the status will turn green to indicate you have had a successful install.

If it remains amber, then that means your widget is not connecting to Deskpro and there has been an issue with your installation. Please send us an email at support@deskpro.com if you have issues with your setup.

Deployment Options

Below the Messenger Installation Status you’ll see Deployment Options, which allows you to choose how you want to install messenger, using code snippets. We currently support Basic JavaScript and Single Page Application deployments of the widget. Once you select your option, the corresponding code snippets will appear.

Once you choose your deployment option, follow the instructions on the page to install messenger on your website.

Deployment Settings

Toggling the Enable Messenger on your Help Center to the on position, automatically adds the messenger widget to your Help Center as a quick and easy, no-code solution to getting connected to your customers. Toggling it to the off position, removes it from your Help Center.

Important: If you have made changes to the body-include.html in your Help Center, then you will need to remove those changes in order for the Enable Messenger on your Help Center toggle to function. In Admin, go to Help Center > Help Center Design, scroll down to the Template Editor section, and select Open Template Editor. At the top of the template editor, select and edit the body-include.html template inside Internal.

When you toggle the Enable Messenger on your website to the on position, then you can choose to specify trusted domains that your messenger widget can send requests through.

Note: Once your messenger has been deployed to your website, toggling the Enable Messenger on your website to the off position, hides the widget on your page and blocks any requests from being sent through, however it does not remove it from your website’s code. If you want to remove it completely from your website, you will need to manually remove the injected code from your code base.

Enable Push Notifications

For web deployments of the widget, we support two push notification implementations:

1. Firebase Cloud Messaging (managed through Google)

2. Native browser push notifications (managed through Deskpro)

Both have their merits so ultimately it us up to you to decide which you prefer. If you want a no-fuss implementation of push notifications that will work across Chrome, Safari, Edge, and Firefox, our native web push service works with the flip of a switch. However, if you are looking for customer re-engagement/retention and analytics, then Firebase Cloud Messaging (FCM) can provide you with valuable metrics but requires configuring it up outside of Deskpro. We do however, make it very easy to upload and integrate FCM into your messenger.

FCM

If you choose to use FCM as your push notification service, you will need to the following pre-requisites on hand to upload to Deskpro:

1. Download your google-services.json from Firebase

2. Project ID

3. App ID

Once you have gathered this information from Firebase, upload it into the appropriate fields under the FCM settings on the Deployment Tab.

To view how to setup Firebase, click here.

Web Push Notifications

1. Help Center: If you want to use Deskpro’s push notification service, then select this option on the Deployment Tab. No other configuration is needed.

2. External Website: If you want to use Deskpro’s push notification service on an external website, then click on the Download File button. Deskpro will automatically generate a service worker file for you to embed in the root of your website’s code base. Once embedded, no additional configuration is needed.

JWT

Apart from specifying trusted domains, you can add an extra layer of security and require JWT authentication to use messenger.

If this is toggled ON, then a user must be authenticated via JWT. If they are not auth'd then they will be unable to access the messenger widget.

If it is toggled OFF, then there is no JWT required to use the widget.