Chat Buttons Floating Articles

Prerequisites

  • Make sure you have a Bold360/Genesys DX account and a Genesys Cloud account.
    Note: If you do not have a Bold360/Genesys DX and/or a Genesys Cloud account, please contact your Genesys representative.
  • Your Genesys cloud org should already have a messenger deployment with Predictive Engagement enabled.
    You can read about how to set up Genesys Messenger here
  • Make sure you have a chat window created on your website. You can read about how to set up a chat window here.

Process

                   
  1. Create an OAuth client in Genesys Cloud
    You can find the process of creating an OAuth client in Genesys here
    Follow the referred process and make sure to select Token Implicit Grant (Browser) as Grant Type.
     
  2. Obtain your Bold360 account ID
    Your Bold360 ID is necessary to add the Genesys DX proactive chat integration to Genesys Cloud.
    1. Open the Bold360 admin.
    2. Navigate to Channels > Chat > Chat Buttons (Floating). In Chat buttons, click on the Chat button you want to use.
    3. Click HTML.
    4. Click Generate HTML and copy the account ID from the generated HTML. Save this ID for the next steps.

       
  3. Add the Genesys DX proactive chat integration to your Genesys Cloud organization
    1. In the Genesys Cloud top ribbon, click Admin.
    2. Under Integrations, click Integrations, and search for DX.
    3. Click Install.
    4. In Details, rename the integration if necessary, and then click the Configuration tab.
    5. Paste the previously obtained Bold360 account ID in the Account ID field.

       
  4. Create an API trigger in Bold360
    This API trigger defines the conditions of an API call to be invoked in order to activate the predictive engagement of the selected Bold360 chat button.
    1. Create a new API setting. Name it “GPE+DX” and click Save

      Follow the API trigger creation process described here. See Task 2: Create an API trigger.
      During the process, make sure to set the following:
            In General
               API Key: Settings Key for Customer Journey Embed
               Item type: Chats
               URL Type: Agent button
               View: Embedded
            In Parameters, select VisitInfo in FIELD.
       
  5. Create an action map in Genesys Cloud
    1. Create a segment which defines customer characteristics that you want to engage.
    2. Create an action map: follow the process described here.
      During the process, make sure to set the following:
      1. In Configure trigger type, select Genesys DX Bold Chat. The Bold360 Open Action Schema pops up.
      2. In Bold360 Open Action Schema:
        1. Select the Bold360 Account ID you have added to Genesys Cloud in Step 3 from the dropdown menu.
        2. Obtain the Chat button ID and the Website ID from Chat button (Floating) HTML in the Bold360 admin and paste them in the respective fields. Click Finish.
      3. In Set up Trigger, click Select Segments and select the segment you have created in the first step. Click Done.

         Note: Optionally, you can create outcomes before creating the action map. Read more about outcomes here
         
  6. Creating the iFrame
    1. Host the following HTML file and make it publicly available.

      <!doctype html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

          <title>Customer Journey Embed</title>
      </head>
      <body>
      <ul id="data"></ul>
      <p id="status"></p>

      <!-- This page is loaded in an iframe by the Bold360 Agent Workspace when an agent accepts an interaction. -->
      <!-- The page extracts the customerId passed by the parent application and -->
      <!-- uses it to redirect to the customer journey visualisation for that customerId. -->
      <script type="text/javascript">
        const authStorageKey = 'bold_agent_genesys_cloud_auth';
        const redirectStateStorageKey = 'bold_agent_redirect_state';
        const region = getQueryVariable('region');
        const environment = getQueryVariable('environment');  // likely to be undefined most of the time

        function redirectToLoginPage() {
          const redirectUri = getQueryVariable('redirectUri');
          const domain = genesysCloudDomainForRegion(region, environment);
          const clientId = getQueryVariable('clientId');

          const loginUrl = `https://login.${domain}/oauth/authorize?client_id=${clientId}&response_type=token&redirect_uri=${encodeURIComponent(redirectUri)}`;

          saveRedirectState();

          window.location.href = loginUrl;
        }

        function getAuthData() {
          let item;
          try {
            const itemStr = localStorage.getItem(authStorageKey) || '{}';
            item = JSON.parse(itemStr);
          } catch (err) {
            console.error('Could not deserialise auth data', err);
            return {};
          }

          return item;
        }

        function setAuthData(authData) {
          return localStorage.setItem(authStorageKey, JSON.stringify(authData));
        }

        function getSavedRedirectState() {
          return localStorage.getItem(redirectStateStorageKey);
        }

        function saveRedirectState() {
          localStorage.setItem(redirectStateStorageKey, window.location.search);
        }

        function clearRedirectState() {
          localStorage.removeItem(redirectStateStorageKey);
        }

        function exec() {
          const hashParams = new URLSearchParams(window.location.hash.slice(1));
          let authData = parseAuthParams(hashParams);

          if (isAuthValid(authData)) {
            setAuthData(authData);
            window.location.hash = '';
          } else {
            authData = getAuthData();

            if (!isAuthValid(authData)) {
              console.log('redirecting to login page')
              redirectToLoginPage();
              return;
            }
          }

          let queryParamsStr = window.location.search;
          const savedQueryParams = getSavedRedirectState();

          if (savedQueryParams) {
            queryParamsStr = savedQueryParams;
            clearRedirectState();
          }

          const queryParams = new URLSearchParams(queryParamsStr);

          // customerId is passed in the VisitInfo custom parameter from Bold360
          const customerId = queryParams.get('VisitInfo');
          if (!customerId) {
            $('#status').text('No customerId found..');
            return;
          }

          redirectToGadget(customerId, authData.accessToken, queryParams.get('region'));
        }

        function isAuthValid(authData) {
          return authData && authData.accessToken && authData.expirationTime && authData.expirationTime > Date.now();
        }

        function parseAuthParams(params) {
          const auth = {};

          if (params.has('access_token')) {
            auth.accessToken = params.get('access_token');

            const expiresIn = params.get('expires_in');

            if (!isNaN(expiresIn * 1)) {
              auth.expirationTime = Date.now() + expiresIn * 1000;
            } else { // default of 1 hour expiry
              auth.expirationTime = Date.now() + 3600 * 1000;
            }
          } else {
            const authToken = getQueryVariable('auth');
            if (authToken) {
              auth.accessToken = authToken;
              // review if this works
              auth.expirationTime = Date.now() + 3600 * 1000;
            }
          }

          return auth;
        }

        function getQueryVariable(variable) {
          var query = window.location.href.split('?');
          var vars = query[1] ? query[1].split('&') : [];
          for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split('=');
            if (decodeURIComponent(pair[0]) == variable) {
              return decodeURIComponent(pair[1]);
            }
          }
        }

        function genesysCloudDomainForRegion(region, env) {
          if (env && env === 'dev') {
            return 'inindca.com';
          } else if (env && env === 'test') {
            return 'inintca.com';
          }

          switch (region) {
            case 'euw1':
              return 'mypurecloud.ie';
              break;
            case 'euc1':
              return 'mypurecloud.de';
              break;
            case 'apne1':
              return 'mypurecloud.jp';
              break;
            case 'apse2':
              return 'mypurecloud.com.au';
              break;
            case 'aps1':
              return 'aps1.pure.cloud';
              break;
            case 'euw2':
              return 'euw2.pure.cloud';
              break;
            case 'cac1':
              return 'cac1.pure.cloud';
              break;
            case 'usw2':
              return 'usw2.pure.cloud';
              break;
            case 'apne2':
              return 'apne2.pure.cloud';
              break;
            default:
              return 'mypurecloud.com';
          }
        }

        function redirectToGadget(customerId, accessToken, regionDefined) {
          const domain = genesysCloudDomainForRegion(regionDefined, environment);
          let gadgetUrl = `https://apps.${domain}/journey/gadgets/v0/integration/purecloud-launcher/?gadgetId=holisticCustomerJourney&customerId=${customerId}&customerIdType=cookie`;

          if (accessToken) {
            gadgetUrl += `&accessToken=${accessToken}`;
          }

          window.location.href = gadgetUrl;
        }

        exec();
      </script>
      </body>
      </html>

    2. Determine your region based on the following table.
      URL Used to access Genesys Region short name
      https://apps.mypurecloud.com use1
      https://apps.usw2.pure.cloud usw2
      https://apps.cac1.pure.cloud cac1
      https://apps.mypurecloud.de  euc1
      https://apps.mypurecloud.ie euw1
      https://apps.euw2.pure.cloud  euw2
      https://apps.aps1.pure.cloud aps1
      https://apps.apne2.pure.cloud apne1
      https://apps.mypurecloud.com.au apse2
      https://apps.mypurecloud.jp apne1

       

    3. Set the API trigger iframe URL to https://<url-to-the-html-file>?clientId=<OAUTH_CLIENT_ID>]&region=<REGION_SHORT_NAME>&redirectUri=https://<url-to-the-html-file>.
       
  7. Results on the Agent Platform
    Agents can now inspect the customer's journey on the Agent Platform. 
    1. Make sure that Agents are logged into the Genesys Agent Workspace and into Genesys Cloud as well.
    2. Select the icon of the API trigger set in Step 4 in the top ribbon.
    3. The Web visit visualization of the customer is now visible and Agents can get details about each phase of the the customer's journey.

Optional: Customize Chat Buttons

Note: This article is part of a Quick Start Guide to help you implement your Digital DX environment from scratch.

Every business has its own unique voice and brand identity, and Digital DX gives you the control and flexibility to customize your implementation to your unique business needs.

  1. Click Channels > Chat > Chat Buttons (Floating).
  2. Click on the name of your chat button.
  3. Go to the Settings > Display.
  4. You can select among predefined images in our Button Template library or provide URL links to your own custom button images.
  5. Scroll down to the Positioning section to select where your chat button is displayed on your web page and how it will animate when shown to the visitor.
  6. Save your changes.

Generate chat button HTML

The primary connection between Digital DX and your chat customers is a snippet of HTML code that you generate together with a chat button and insert to your site.

When choosing an HTML snippet for your site, you are asking yourself the following questions:

  • Which button or link are you showing to customers?
  • Are you collecting information about customers so you can analyze and react to visits even before they chat?
  • Are you tracking conversion events so you can relate specific chats to actual sales or other milestones?
  • Are you inviting customers to chat based on characteristics of their visit such as page visited, length of visit, and more.

Here's how to set up a Digital DX chat button HTML snippet to create a "gate" between customers and Digital DX. For this first test we'll create a Floating Chat button.

  1. In the Web Admin Center, choose the type of HTML code to generate:
    Option Description
    Floating Chat Button Select Channels > Chat > Chat Buttons (Floating) when you want to implement a floating chat button and/or monitor customers before chat and/or invite users to chat based on characteristics of their visit.
    Static Chat Button Select Channels > Chat > Chat Buttons (Static) when you want to implement a fixed-position chat button or link on your site.
    Conversion Tracking HTML Select Customers > Conversion Codes when you want to track conversion events so you can relate specific chats to actual sales or other milestones.

    What is the difference between static and floating chat buttons?

    A static chat button is a standard HTML button that is always displayed on your website as a static element. Whether it's a button or just a clickable string of text depends on how you configure your chat button definition.

    Floating buttons are animated by default and they slide into view when the customer moves the mouse over these buttons. When the button slides in, it covers part of your website, essentially creating an extra layer on top of your website content. You can define where the initial shrunk version of the button should appear on your website and how much it should shrunk before a customer moves the mouse over it.

  2. Apply settings to your HTML and associated entities.
    Tip: This article focuses on the "big picture" of how to implement an HTML snippet rather than the potentially long chain of settings that you can make to the various Digital DX entities that can be associated with an HTML snippet, such as Chat Button definitions, Chat Window definitions, Website definitions, Department definitions, Invitation Rulesets, Conversion Codes, and more.
  3. Click Generate HTML and then Copy to Clipboard.

    Result:

  4. Paste the code to your site.
    Important: Modifications to the generated HTML code may cause unexpected behavior and is not supported. For assistance or questions regarding the HTML snippet, contact Support.

    When pasting the HTML code to your site, consider the following in light of your actual site architecture:

    • To activate the code on all pages, paste the code into the footer include of your website before the closing <body> tag.
    • To activate the code per page (on a single page or multiple pages individually), paste the code into any page before the closing <body> tag.
    • If the chat button associated with your HTML uses a layered chat window, make sure your pages start with a <!DOCTYPE html> tag. Without this tag, some versions of Internet Explorer will use quirks mode and open the layered chat window in a pop-up.
    Tip: If you are sending the code snippet to a web developer via email, do not paste the code directly into an email message. Save the HTML code in a text file (Notepad, for example) and attach it to an email.

You must re-copy and re-insert your HTML code after making any of the following changes:

  • When you associate a new chat button (static or floating) with your HTML (rather than modifying an existing chat button)
  • When you associate a new website with your HTML (rather than modifying an existing website)
  • When you toggle Pass custom information about customer on/off
  • When you change the Conversion Code associated with your HTML
  • When you change the invitation rule set associated with your HTML

Show a different chat button image when agents are available/unavailable

To ensure that customers are properly informed about agent availability, you can choose to show a specific chat button image when at least one agent is available and another (or none) when no agents are available.

This feature is part of the chat button setup process for both floating and static buttons.

  1. Create or edit a fixed-position (static) or floating chat button, as follows:
    1. In the Web Admin Center, go to Channels > Chat > Chat Buttons (Static) / Chat Buttons (Floating).
    2. Select an existing chat button or click Create New.
  2. On the Settings tab in the Display section under When Unavailable, choose the expected behavior when no agents are available:
    • Show Unavailable Button: When no agents are available, the Unavailable chat button is displayed to customers as displayed on the Preview pane.
    • Show No Button: When no agents are available, no button is displayed to customers.
    • Show Available Button: When no agents are available, the Available chat button is displayed to customers as displayed on the Preview pane.
  3. You can also select a custom image for your available and unavailable agents that customers can see. To do so, select the Custom image source and enter the available and unavailable chat image URLs into the corresponding fields.
  4. Save your changes.

    Result: The settings are applied to the chat button.

Your chat button is ready to be set as a chat entry point by being associated with an HTML snippet and inserted to a site.

To activate a newly created chat button as a chat entry point on your website, you must paste the HTML code to your site. When editing an existing button, you do not need to paste the code since these settings are not in the HTML code itself, but rather on Digital DX servers.

Customize chat button appearance, position, animation

Change the look and behavior of your chat button.

  1. Create or edit a fixed-position (static) or floating chat button, as follows:
    1. In the Web Admin Center, go to Channels > Chat > Chat Buttons (Static) / Chat Buttons (Floating).
    2. Select an existing chat button or click Create New.
  2. To change your chat button's appearance, go to the Settings tab under Display.
  3. For floating chat buttons you have these additional options:
    • To control where your floating chat button displays on the customer's browser page, go to the Settings tab under Positioning
    • To control how your floating chat button is animated when shown to the customer, go to the Settings tab under Animation
  4. Save your changes.

    Result: The settings are applied to the chat button.

Your chat button is ready to be set as a chat entry point by being associated with an HTML snippet and inserted to a site.

To activate a newly created chat button as a chat entry point on your website, you must paste the HTML code to your site. When editing an existing button, you do not need to paste the code since these settings are not in the HTML code itself, but rather on Digital DX servers.

Set a chat button to be shown in specific countries

You can set chat buttons to be shown to customers in specific countries.

This feature is part of the chat button setup process for both floating and static buttons.

  1. Create or edit a fixed-position (static) or floating chat button, as follows:
    1. In the Web Admin Center, go to Channels > Chat > Chat Buttons (Static) / Chat Buttons (Floating).
    2. Select an existing chat button or click Create New.
  2. At the bottom of the Settings tab, under Locale, clear the checkbox for Show to all countries.
  3. Select countries to include or exclude.
  4. Save your changes.

    Result: The settings are applied to the chat button.

Your chat button is ready to be set as a chat entry point by being associated with an HTML snippet and inserted to a site.

To activate a newly created chat button as a chat entry point on your website, you must paste the HTML code to your site. When editing an existing button, you do not need to paste the code since these settings are not in the HTML code itself, but rather on Digital DX servers.

Associate chats (a chat button) with a department

Associate a chat button with a department to allow chats originating from the button to be tagged with department metadata, which can then be used to assign and organize chats.

This feature is part of the chat button setup process for both floating and static buttons.

  1. Create or edit a fixed-position (static) or floating chat button, as follows:
    1. In the Web Admin Center, go to Channels > Chat > Chat Buttons (Static) / Chat Buttons (Floating).
    2. Select an existing chat button or click Create New.
  2. On the Settings tab, choose the Department to associate with the chat button.
  3. Save your changes.

    Result: The settings are applied to the chat button.

Your chat button is ready to be set as a chat entry point by being associated with an HTML snippet and inserted to a site.

To activate a newly created chat button as a chat entry point on your website, you must paste the HTML code to your site. When editing an existing button, you do not need to paste the code since these settings are not in the HTML code itself, but rather on Digital DX servers.

Set the chat window seen by customers

To choose the actual interface seen by customers upon clicking a chat button, you must associate your chat button with a chat window.

This feature is part of the chat button setup process for both floating and static buttons.

  1. Create or edit a fixed-position (static) or floating chat button, as follows:
    1. In the Web Admin Center, go to Channels > Chat > Chat Buttons (Static) / Chat Buttons (Floating).
    2. Select an existing chat button or click Create New.
  2. On the Settings tab, choose the Chat Window to associate with the chat button.
  3. Save your changes.

    Result: The settings are applied to the chat button.

Your chat button is ready to be set as a chat entry point by being associated with an HTML snippet and inserted to a site.

To activate a newly created chat button as a chat entry point on your website, you must paste the HTML code to your site. When editing an existing button, you do not need to paste the code since these settings are not in the HTML code itself, but rather on Digital DX servers.

Create a Floating Chat Button

Chat buttons are entry points that visitors use to engage with you. They can be customized to meet the needs of each area of your site.

Now you?ll create your first chat button and generate a very important snippet of HTML code. You?ll use the HTML code on your site to deploy chat; don?t worry if you aren?t ready for that step yet ? you can also preview test chats from within the Bold360 Admin Center.

Note: This article is part of a Quick Start Guide to help you implement your Bold360 environment from scratch.

To see the below steps in action, view our tutorial:

  1. In the Web Admin Center, go to Channels > Chat > Chat Buttons (Floating).
  2. Click My Chat Button to edit.
  3. From the Chat Window drop-down, select My Chat Window that you have previously set up.

  4. If you have one department, select it under Department. This will route any chats that come in through this button to agents within that department.
    Note: If you have multiple departments, you can find more information on your routing options in Route chats to your agents.
  5. We recommend using your own custom image for the button itself. To do so, select Custom for Image Source. This custom image should be hosted on a URL, so that you can point to the button in Available Chat URL.
  6. We also recommend using another custom image for an unavailable button. To move forward with this recommended approach, select Show Unavailable button under When Unavailable. This custom image should also be hosted on a URL, so that you can point to the Unavailable button within Unavailable Chat URL.
  7. Once you have completed all the steps outlined, you are ready to generate the HTML to place on your website. To do so, on the left side of the page, go to the HTML tab.
    1. Under Website, select My Website.
    2. Under Auto-Invite Ruleset, select My Invite Ruleset .
    3. Click Generate HTML.

      You may be prompted to save your changes.

    4. Once HTML is generated, click Copy to clipboard.
    5. Paste this code into your favorite text editor such as Notepad. We do not recommend pasting code into Microsoft Word as it can break the code with styling or line breaks. Our best practice recommendation is to deploy this code to a staging site first. From there, review the widget and make any changes you want. Upon doing so, regenerate the code and then send it to your web developer to be added to all pages on your live website! Note that any test data will appear in reporting.
      Note: If you don?t have a custom button image, you can use our default image by keeping Image Source set to Predefined options.

Need more info? There?s a section about chat buttons in our Support Center.

Chat button setup

Configure the settings associated with the button or text that customers click to initiate chat.

Note: To understand the relationship between a website, a chat window, and a chat button, consider the following:
In Bold360, a website is a group of settings that helps you manage your Bold360 strategy across multiple sites or domains. Websites help you track the origin of visits and manage business hours. When used with the Chat Rule Engine, they help you manage incoming chat items.
The website also contains the code of a "chat button", which does not only refer to a simple button on the user interface that a customer clicks, but also a complex group of settings associated with that button. These settings include button images, position, animation, associated departments, the countries where the button is displayed and so on.
When the customer clicks the chat button, a chat window opens, which again is not only a simple window on the user interface, but also a complex group of settings that control the layout and content of that window.
To interact with customers, first you have to set up a website and then a chat window. Subsequently, create a chat button and associate that button with the chat window and the website.

It is important to understand that "chat button" does not refer to a simple button (as in the actual interface a customer clicks), but rather a complex group of settings associated with an actual button, buttons, or string of text:

  • The actual button images shown when agents are available or unavailable
  • The position of floating button images on your page
  • Animation settings for floating button images, including resize when not in focus
  • The chat window customers are shown when they click the button
  • The department associated with the button
  • The countries where the button will be displayed

The following additional settings help determine when your chat button is shown to customers:

  • Agent availability (including agent hours)
  • Website business hours
  • Department business hours
  • Automatic Distribution settings (queue limits)

What are best practices for setting up chat buttons?

  • In addition to a floating button, you should also have static chat buttons prominent in header and footer.
  • ?????Ensure all parameters are defined when generating the button HTML code (website, department when necessary, window as well as the Pass custom information about customer option enabled).
  • Easy for customers to find answers or help
  • Easy access makes for a positive customer experience
  • Allows for customizing the initial button that customers will interact with.
  • Ensuring that parameters are set up from the beginning will ensure easier, more flexible, and more sustainable management in the future. If any of these parameters need to be added or changed down the line, it will require re-deployment of the code, adding risks and delays.

Announcements

Join the DX Community!

Meet fellow DX pros, ask questions, and learn best practices.

Join the DX Community

Featured

Set up an email account

Set up an email account

Configure Digital DX to receive, track, and manage emails.

  1. Create or edit an email account, as follows:
    1. In the Web Admin Center, go to Channels > Email > Email Accounts. The Email Accounts window is displayed.
      Note: To verify that an email account is set up properly, click Test next to an account.
    2. Select an existing account or click Create New. The New/Edit Email Account page is displayed.
  2. Select Enable email to activate the email account.
  3. Enter basic account settings on the General tab:
    Option Description
    Configuration Name Name the account for internal reference.
    Sender Email Address To use when sending email.
    Friendly Sender Name Used as the From Email Name when sending emails via this account. For example: Support Team, Jane Doe.
    Email client

    Select the email client you are using: MS Office 365 / Gmail / Other.

    The MS Office 365 and Gmail options don't only support the recommended OAuth 2.0 authentication, the Other option supports any client with basic authentication.

  4. Select the email client that you use to communicate over email.
    Note: In the Digital DX Desktop Client, you cannot select email client.
  5. Depending on your email client, you have the following options:
    Option Description
    User Name User name of the email server. For example, in the email address support@acme.com, the user name is support.
    Password The password associated with the user name for the POP3 server. Only available when you select Other for email client type.
    Server/Port Enter the host name or IP address and port of your mail server. If your email address is support@acme.com, then your mail server host name is normally mail.acme.com or just acme.com. All inbound emails are retrieved from this POP3 server.
    Secure Connection (SSL) To use a secure connection to your mail server, check Secure Connection (SSL) and enter the Port to be used for the connection. Check with your service provider as required.
    Type Choose your server type: POP3 or IMAP.
    Note: POP3 is unavailable for Microsoft Office 365 users.
    Leave copy of messages on server Store copies of emails on your POP3 server to facilitate download to Outlook or any other mail client.
    Folder Click Refresh folder list and then select the folder in your email account that you want to use for email communication with your customers.
    Tenant ID You Microsoft Tenant ID that you can find in the Azure AD admin center. (in the Directory ID field on the Properties page). Only available for Microsoft Office 365 users.
    Client ID
    • Microsoft Office 365 users find it in the Overview page of the Azure AD admin center
    • Gmail users find it on the APIs & Services > Credentials page Google Cloud Platform
    Client Secret Your client secret that you can find right next to your client ID. Only available for Microsoft Office 365 and Gmail users.
    Outgoing server Select SMTP server to set up an SMTP server for outgoing email.
  6. Optional: (Optional) Enter additional settings on the Distribution - Organization tab:
    Option Description
    Department Associate a Department with the email account. The Department can be used to override account-level automatic distribution settings and to determine which agents can be assigned emails by the automatic distribution system.
    Maintain email thread ownership on new mails Preserve the Owner (agent) field of each email thread.
    Append email thread ID to subject Append the Email Thread ID to the subject of replies. This make it easier to keep track of conversations with customers.
    Append email thread ID to subject Append the Email Thread ID to the subject of replies. This make it easier to keep track of conversations with customers.
    Auto-bcc Specify an email address that is included in the BCC field of all outbound emails from the agent.
  7. Optional: (Optional) Enter additional settings on the Format and content tab:
    Option Description
    Encoding Encoding for outgoing and incoming messages.
    Format Choose to show incoming email as either plain text or HTML.
    Canned messages for emails Select canned message folders that agents can use with email.
    Email Footer Enable and design a footer that is appended to all emails sent from this email account.
  8. Save your changes.
  9. For Gmail and MS O365 integrations, go to the recently added email account on the Email Account view and select the Authorize option.

    Complete the steps in the dialog that appears. Once the authentication is complete, the status of the email channel changes to Ready.