Step 1: Customizing Messenger

Updated by Stephen Boss

Messenger is where your customers chat and create service threads, it is the app they use to collaborate with your team and raise a chat or service request. Messenger was designed to have an experience that is the same (or similar) across all the platforms you are deploying it to.

Messenger can be fully customized with your company's or your customer's branding. It is a unified web application which means that if you change the branding later, your customers' messenger apps will inherit those changes.

Messenger can be deployed to your customers via brandable Teams app, Slack, Web snippet, Desktop (Windows and MacOS), and Mobile (iOS and Android) so you can easily reach your users where they work.

If you have finished setting up Messenger and are looking to better understand the different deployment options available to you and your customers, you can reference the guide Deploying Messenger.

Setting up Messenger

Messenger Settings Tab

  1. Navigate to the Thread Admin Panel
  2. Your Thread admin panel navigation has a section named Messenger (as shown below).
  3. When clicked, your browser window will display the Messenger Settings tab. On the left side of this screen, you will set your board settings, on the right you see a live Messenger Emulator. The look and feel of this emulator updates as you make changes to your configuration, more on this soon.
    It's important that your set your boards here, select a board for Support and for Sales as well as a status for Re-opened chats. If you skip this step chats will not be able to flow into the system and Messenger will not work.
    1. Service Board - Set your primary service board where you want Messenger Chats and New Requests to be routed. Messenger requests following the "I'm already a customer" question will flow here.
    2. Sales Board - Set your primary sales board where you want Messenger Chats to be routed following the "I'm new and I have a question" inquiry.
    3. Reopen Service Status - In Messenger, your users are able to see their Active and Done service threads. They have the option to reopen Done service threads by responding. Setting this status tells us what status to map these reopened service threads to in your Ticketing System.
    4. Proactive Messages - When Messenger is deployed to a customer's Teams or Slack environment, Messenger will send direct messages and pushes to your customers when you Message them or reply to a thread they are assigned. You can disable this setting here. We recommend leaving it on, this feature makes it easier to engage with your customers even after they have left the chat.
    5. Click Save when done on this tab.
⚠️ Important! Before you proceed, make you have a flow running for your service and sales boards in order to receive tickets from Messenger chat.

Messenger Design

After you've mapped your boards and statuses from your Ticketing System, you are ready to add your branding to Messenger.

  1. Navigate to your Thread Admin Panel
  2. Click on Messenger in the left navigation bar
  3. Navigate to the Design tab.
    As you update Messenger with your preferred branding, the Emulator on the right will also update, allowing you to test the Customer experience -you can even start real chats from here!
    The live emulator is a real instance of Messenger! It's a great way not only to see the look and feel for your customers as you brand it but also test out Messenger and start a real chat. Go ahead, give it a try!
    1. Primary Color - We allow you to choose the primary color for Messenger here. You are able to add your own custom color as well!
    2. Tray Icon - this is the icon that will appear in the application tray when deployed to Windows Desktop.
    3. Logo - Add your logo here, this will show up at the top of the window when your users log in to Messenger. Ideal specs: 140px wide x 40px height, JPG or PNG (PNG for transparent backgrounds)
    4. Alerts - Set custom alert images.
    5. Give your bot an avatar - Your chatbot can have a custom avatar of its own. Ideal specs: at least 44px square, JPG or PNG (PNG for transparent backgrounds)
    6. Give your bot a name - Give your bot a name that customers will recognize.
  4. Click Save when done customizing, you can always come back later.

Messenger Hours

We also allow you to configure Messenger with your Company's office hours. This is recommended for times when you aren't going to be monitoring for new Chats.

  1. Navigate to your Thread Admin Panel
  2. Click on Messenger in the left navigation bar
  3. To set office hours, navigate to the Hours tab.
    Outside of your configured office hours, your users will see a dynamic banner that explains you are offline and when you'll be back online.
    If you set a custom message, it will display after office hours when users try to initiate a chat. Example of a custom message:
    The user is still able to create a service thread describing the issue so you can get back to them at your earliest convenience.

Testing Messenger with the Emulator

Next Steps - Deploying Messenger

Now that you've successfully setup Messenger, it is time to deploy it. Read our guide on Deploying Messenger for a full walkthrough of the deployment options available to you and how to deploy.

How did we do?