How to add a chat button to an Outlook email footer
To add a button to your email signature that users click to initiate a chat session, you simply generate the appropriate chat button code and associate it with your Outlook signature.
To add a button to your email signature that users click to initiate a chat session, you simply generate the appropriate chat button code and associate it with your Outlook signature.
Result: The Generate Chat Button HTML window is displayed.
Result: The chat button is added to your email signature.
Set a text-based link that a visitor clicks to initiate a chat session.
When implementing chat, your visitors need something to click in order to start a chat session. The term chat entry point refers to the interface element that a visitor clicks to initiate a chat. You set a chat entry point as part of the procedure of generating and inserting an HTML snippet to your site.
Result: The Generate Chat Button HTML window is displayed.
A Chat Window definition controls the look and feel and advanced behavior of the interface that is opened when a visitor clicks your link.
See How to use Website definitions to manage multiple sites.
See Custom Visitor Info, Variables: Collecting visitor data.
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.
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:
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.
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.
Result:
When pasting the HTML code to your site, consider the following in light of your actual site architecture:
You must re-copy and re-insert your HTML code after making any of the following changes:
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.
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.
Change the look and behavior of your chat button.
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.
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.
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 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.
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.
The term chat button is used generally to refer to both Custom Chat Button definitions and Custom Floating Chat Button definitions.
It is important to understand that "chat button" does not refer to a simple button (as in the actual graphical user interface element a visitor clicks), but rather a complex group of settings associated with an actual button, buttons, or string of text. Together these settings make up a definition.
We recommend creating and managing Custom (static) Chat Button definitions and Floating Chat Button definitions from the following location: Setup > Account Setup > Chats.
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 visitor 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 visitor moves the mouse over it.
Chat button definitions can be associated with the following:
The direction of the relationship is from HTML snippet to chat button, and from chat button to window or department.
An HTML snippet can only be associated with one chat button definition. A chat button definition can only launch one specific chat window and can only be associated with one department, while a chat window can be launched from multiple buttons or invitations and a department can be associated with multiple buttons.
The chat button definition controls the following:
The following settings help determine when your chat button is shown to visitors:
This feature is part of the Custom Chat Button definition process for both floating and fixed-position buttons.
Result: The New Custom Button window is displayed.
Result: The settings are applied to the custom chat button definition.
To activate a newly created button definition 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 the BoldChat server.
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 Custom Chat Button definition process for both floating and fixed-position buttons.
Result: The New Custom Button window is displayed.
Result: The settings are applied to the custom chat button definition.
To activate a newly created button definition 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 the BoldChat server.
Set a button that a visitor clicks to initiate a chat session.
When implementing chat, your visitors need something to click in order to start a chat session. The term chat entry point refers to the interface element that a visitor clicks to initiate a chat. You set a chat entry point as part of the procedure of generating and inserting an HTML snippet to your site.
Result: The Generate Chat Button HTML window is displayed.
See Collecting visitor data with Custom Visitor Info and Variables.
To ensure that visitors are properly informed about operator availability, you can choose to show a specific chat button image when at least one operator is available and another (or none) when no operators are available.
This feature is part of the Custom Chat Button definition process for both floating and fixed-position buttons.
Result: The New Custom Button window is displayed.
Result: The settings are applied to the custom chat button definition.
To activate a newly created button definition 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 the BoldChat server.
Set a floating button that a visitor clicks to initiate a chat session.
When implementing chat, your visitors need something to click in order to start a chat session. The term chat entry point refers to the interface element that a visitor clicks to initiate a chat. You set a chat entry point as part of the procedure of generating and inserting an HTML snippet to your site.
Result: The Generate Visitor Monitor HTML window is displayed.
Gather information about visitors and pass it to BoldChat to help operators achieve business goals.
You can pass custom info and custom variables from the HTML code for a Chat Button, Visitor Monitoring, or Conversion Tracking. This article covers the variables that are available per HTML code type.
Select the Pass Custom Visitor Information option when generating Chat Button HTML.
Values are passed when the visitor initiates a chat. Values are shown on the operator grid together with the incoming chat.
Select the Pass Custom Visitor Information option when generating Visitor Monitoring HTML.
All variables are passed from one page to the next and remain set until a new value is passed. This allows for the Visitor Monitoring to maintain the associated value throughout the visit, as well as passing those values to the Conversion Code (see below).
Select the Pass Custom Conversion Information and Pass Custom Visitor Information options when generating Conversion Code HTML.
This section helps you implement custom variables and put them to use to solve business needs.
Variable values remain the same from page to page unless changed. With this in mind, we do not recommend using both Chat Button custom variables and Visitor Monitoring custom variables on the same page. A good example of why this is not necessary would be when a customer comes to your site and signs into their account. The Visitor Monitoring code sets the custom variables appropriate to the information from the customer's account. The customer then decides to launch a chat, these variable are then passed into the Pre-Chat form and pre-populate the form for the customer. By having the variables also available in the Chat button code, it opens the possibility of having the values from the Visitor Monitoring code overwritten by the Chat Button variable assignment.
Once the code containing your custom variable has been generated, you must edit the script to set the variable assignment. This is easily accomplished with a little JavaScript or with your preferred scripting language via the getPageViewer directive.
In the above highlighted example, customerId is a variable that you would create and associate the desired value from the page. Please notice that both vi variables have been set, this is necessary to ensure the variable assignment functions for both JavaScript enable and Non JavaScript enable browsers.
Now, let's take look at how you would set the value for customerId using a little JavaScript. Once the value is set it will then be passed to the vi variable, this occurs because we have set vi=customerId or more specifically, the value of customerId will be assigned to vi.
Assuming the value of the customer number is exposed in some way, such as an element identifier on the web page. For example, we used a div tag with an Id set to CustomerNumber; this identifies it and enables us to extract the inner value and then assign it to our variable. See below for a full code example.
The code above extracts the value from the div element (123456789) and then assigns it to customerId which in turn is then assigned to vi. Once this is assigned, it is available to be viewed in the visit grid within BoldChat.
You can pass custom information to BoldChat using custom variables via Chat Button or VMS code with the WindowParameters directive. The number of custom variables is not limited.
Let's say that you need to pass the following additional variables:
In this case, construct the WindowParameters directive as follows, where value1, value2 and value3 are the respective values:
var WindowParameters="customField_CampaignID=value1&customField_VisitorFromID=value2&customField_CreativeID=value3";
_bcvma.push(["setParameter", "WindowParameters", WindowParameters]);
Result: The custom variable and the new values now appear in the Chat Details window.
The primary connection between BoldChat and your site is always a snippet of HTML code that you generate in BoldChat and insert to your site.
The HTML snippet tells BoldChat servers how you are using BoldChat. When choosing an HTML snippet for your site, you are asking yourself the following questions:
Regardless of your reason for using BoldChat and the details of your exact implementation, you must integrate a BoldChat HTML snippet to create a "gate" between visitors and BoldChat servers.
When pasting the HTML code to your site, consider the following in light of your actual site architecture:
You must re-copy and re-insert your HTML code after making any of the following changes:
If you no longer want to display a chat window on a specific web page, remove the chat button code from the HTML source of that page.
Enterprise subscribers can set Digital DX to validate all chats, visits, and conversions. Use this feature to ensure that incoming chats originate from the Website associated with the chat button and that chat and visit parameters provided by the visitor cannot be viewed or modified by any third party. When visitor monitoring and/or conversion tracking is enabled, this feature also ensures that the visit/conversion data originates from the website with the monitoring/conversion HTML code.
Data validation is set for a Website definition.
When enabled and required, all chat, visit, or conversion data must be validated as originating from your server before reaching an operator.
By selecting the All HTML must be associated with a Website definition option in General Account > Settings > Extra Security, and ensuring that all Website definitions require validation, every chat assigned to an agent of the account is guaranteed to be validated.
Data Validation Methods:
Both methods rely on a new parameter in the HTML: SecureParameters. This replaces custom variable parameters such as VisitRef and VisitInfo. Any visit, chat or conversion related data when validation is enabled that are not passed into the SecureParameters variable will be ignored by the server. Additionally, if security fails, the chat, visit or conversion will fail as well.
For browsers with JavaScript disabled, Digital DX loads an image inside the noscript tag to register the visit/conversion. In this case, use the parameter secured to pass the secured parameters.
Passed parameters should be URL-form encoded into a single string (for example, VisitName=Robert%20Smith&VisitEmail=r.smith%40gmail.com). This is what you will PGP encrypt, sign and pass as the SecureParameters variable. The final string passed in as the SecureParameters variable will look like this:
"-----BEGIN PGP MESSAGE-----\nVersion: BCPG v1.50\n\nhQEMA9/66abKVXSZAQf/UT+3OtVApwD0H+Fv2S5bXqMfkvHEQgbvXLwMiLPRy2gs\nv3L4EbMGMoIjt8Leg1D/M8bgbovYEs546LwXdAcOQt/n4c2+9WB8mph9lDW4+z9U\n5eWwwDjatrF8yKvpVM+g0+y8SEtuuBr2xrNfXBaCXRSyEN/88tl7drvIjzAg5lUV\nuPMtDvLnE9bAhu02FQx04Dc0lKGDROPlXCp/6tW6rXRmdvZfPRe4GDCzkHoZVOGR\nByNMD1swSIWC60IL5so4wWvmOqgP/fU57W2QNz7wmF9RtSG+L8zdhYX0BKdQAOVL\nKzhRtoMbBpNcT1m0prFhw40sfGDcVnPLJhD4RvLv79LBpwE2HeW3LNm6ZH45ou1A\nmIzik8ZGExDVLY4N9tax6goP1tYXTOq2Zc/XuwIQHhXMdEZaxeLppsjt1cOym/BV\n/2y8uPO8DPQa4jTXDPOsmLJpzAJMnk3EhMMaDDzOIS32i8IyY2sYPgd651ifXrO7\n38zCnPC6zMByBuwqvoT5xlELYE0KFRvm7fmYhYK2KHQrazneESRX0TnLrI3k6mSR\ndK/MSLVb5v6aNY6f/RySADE/XqhEJ8DVXRyN8Qum+vtl1PMGOothaFemT4bZbZ+8\nw7PKCZSFWqKcEZyk1eJl02V8u1VgmYkaya2vvLGFqTGxSVk6jALrPcIyCxW7z1XV\nVSwdraDtqMyJ6aAOkUEF5qidyupoajpyjxWRsaM5Al/VJOjR6u97fu9aSNtGNW73\nmmpqBh2MwbPvO5wWTadN3VLRowlkzNWIX0pdKvdA69fQ4NlGLra9bmH0ofjQuCl9\nNTRAqn5pbyb8aCyWtxMTtgxZwgNsdWMg0yYMLV+HdH3zVT6Bc+lExzOl5rxOXxbz\nQxj3Bqil615AQP2JIi4A6FQ0+Om1xNtm+t6eIFAR3GDYjaw+GgBv+r4mdXRfz/6I\nOQysntG1rMgCHjXg6B2y46PAp2tdVptJVcUhyz93m99MBT3nKtUmmb5sVHJRnmIg\nQjQv+3SKjVnMwncHveNXosBBeem2Vdrb+lVbI3eQ0XD/fEi43oQdl8hSNuqfw1jy\nDz4Gi2EaYyaDqrRMS6nEMaOujfD6zcPpbR8MSbmQTvmi5eOWPQZhopXrN2ogxtea\n5jUabllMN5PxGkXWBAhWG1hUVkYH8SMucQ==\n=/htM\n-----END PGP MESSAGE-----"
You can provide your public signing key on the New/Edit Website window. Digital DX uses it to generate a new server key in the back-end for encrypting the data and providing you a public key for encrypting the data. The server-side generated keys are 2048-bit, and we recommend you use the same key size for your signing key.
Data validation relies on asymmetrical cryptography: parameters are encrypted using your private key and the public key of the server. Digital DX decrypts parameters using its private server key and your public key.
For your first test, you can encrypt your data and pass it into the website setup data verification area. The server will decrypt it, verify the signature, and return the plain-text data or any error messages encountered.
The most secure method of validating chats is the full PGP encryption. However, for ease of implementation, we also support the SHA-512 hashing algorithm.
The parameters you want to pass should be URL-form encoded into a single string (for example, VisitName=Robert%20Smith&VisitEmail=r.smith%40gmail.com). The private hashing key will be concatenated in front of this value, and then hashed using the SHA-512 algorithm. The hashed value should then be hex-encoded and appended to the front of the SecureParameters variable. The final string passed in as the SecureParameters variable will look like this:
"1939D964B68EBFA61DE8C0B45D0C3C4836169C87DAB362116474A3B67B113B65F0172D3FA3191EC3525DA3E50B11A09B00B0A2869A1585EF148420347DE17A9EVisitName=Robert%20Smith&VisitEmail=r.smith%40gmail.com"
On the New/Edit Website window, you can create and delete the private hashing keys used to validate the visitor data.
For your first test, you can hash the key and data to append the data to the hash and pass it to the data verification area of the New/Edit Website window . The server will parse out and verify the hash, returning plain-text data or any error messages.
Once validation is enabled, you can use both original parameter names ("vr", "vn", etc.) and human-readable versions:
Friendly Name | Original | Meaning |
URL | url | The current page of the visitor (also the chat launch url when a chat is launched) |
ReferrerURL | referrer | The referring page of the visitor |
VisitName | vn | The name of the visitor |
VisitRef | vr | A reference value for the visitor |
VisitInfo | vi | An information value for the visitor |
VisitEmail | ve | The email address of the visitor |
VisitPhone | vp | The phone number of the visitor |
CustomURL | curl | The custom URL for the chat |
VisitorIcon | vicon | The chat icon for the visitor |
OperatorIcon | oicon | The default chat icon for the operator |
LastName | ln | The last name of the visitor |
FirstName | vn | The first name of the visitor (synonymous with VisitName) |
InitialQuestion | iq | The initial question for the visitor in chat |
ConversionRef | cr | The conversion reference value for the conversion (must be unique per conversion code) |
ConversionInfo | ci | An information value for the conversion |
ConversionAmount | ca | The amount of the conversion (should be a number simply as 1000.15 for one thousand and fifteen one hundredths) |
LanguageCode | lc | The language code for the chat |
customField_[name] | Value of the custom field with the given name |
Additional fields that require validation:
Friendly Name | Original | Meaning |
ChatButtonID | cbdid | The ID of the chat button used to launch the request (which will additionally set the department and chat window if not overridden with another parameter) |
FloatingChatButtonID | cbdid | The ID of the floating chat button used to launch the request (synonymous with ChatButtonDefID) |
ChatWindowID | cwdid | The ID of the chat window to show to the visitor in chat |
DepartmentID | rdid | The ID of the department to which the chat should be assigned |
OperatorID | roid | The ID of the operator to whom the chat should be assigned |
ConversionCodeID | ccid | The ID of the conversion code |
InvitationID | idid | The ID of the associated Auto-Invite Ruleset |
Finally, there are several validation-related fields for enhancing chat functionality once the chat is validated:
Friendly Name | Original | Meaning |
Type | type | The type of the request to enforce. Chat, visit, or conversion. Recommended on all requests. |
Expiration | expires | The time when the request should no longer be considered valid. Recommended on all requests. Counted in milliseconds from midnight 1970-01-01 UTC.
Note: The expiration should allow for a realistic duration of a session, and not too short.
|
ChatKey | ck | A unique identifier for this chat request. Repeated chat launches with this key will fail. Recommended on all chat-type requests.
Note: Assign this parameter to a session ID or similar to allow for launching more than a single validated chat during a session.
|
VisitorKey | vk | A unique identifier for this visitor. If an operator blocks the chat, it blocks any chat/visitor with this VisitorKey from re-launching chat. |
Unsecured | unsecured | An & separated list of parameter names. These parameters when not present in the validated data can be pulled from the query string of the request normally and/or changed/populated without server validation. For example: VisitName&InitialQuestion&VisitPhone (note the & must be URI encoded to %26 when it is part of the secure parameter string.) |
If you are using the chat API, the following parameters are required when the chat is created:
Friendly Name | Original | Meaning |
APIKey | APIKey | The API key being used. This must match the API key passed in through the authentication header. |
Data | Data | Pre-populated data passed into the chat. (Note: Individual fields must be listed in the 'Unsecured' parameter to not require validation.) |
Do not modify the HTML code generated by Digital DX as it may result in receiving errors. When you click Generate HTML on the Channels > Chat Buttons > HTML page, copy the complete generated code as is into the HTML source of the website that visitors see. Improper setup can result in the following errors:
If visitor monitoring or conversion tracking is not being generated correctly, use the verification area of the New/Edit Website window to verify that the data has not expired and that type is set correctly.
Sample generated HTML is given below. When HTML is generated with an associated Website definition that has Data validation enabled, the generated HTML includes the comment /* Requires Authentication */. This provides sample data that has not been validated. You can add or remove what is needed from the data on your server, then validate the data and replace the value (either with the hash appended in the case of SHA-512, or just the raw encrypted PGP data).
For chat launches, it is best to use the function callback method to make an asynchronous call to your server to validate the chat and return the validated data.
Set your site to monitor visitor activity without displaying a chat button upon entry. Use this solution when you want to be able to invite visitors to chat manually or according to certain criteria.
With this solution the primary connection between BoldChat and your site is a snippet of code called Visitor Monitor HTML.
This ensures that no button is displayed to visitors upon entering a site with Visitor Monitoring HTML.
BoldChat?s Visitor Monitoring tracks visitors on your website in real time and provides detailed information.
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.
You may be prompted to save your changes.
Need more info? There?s a section about chat buttons in our Support Center.
Configure the settings associated with the button or text that customers click to initiate chat.
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 following additional settings help determine when your chat button is shown to customers:
Bold360 version 21.10 contains the following new enhancements:
Going forward, there will no longer be an option to choose (non-secure) HTTP-only connections when generating widget touchpoint scripts. HTTPS will be enforced across all touchpoints going forward and HTTP-only widget configurations will no longer be supported as of December 31, 2021. Any widget script using HTTP only will need to be changed by this date in order to continue uninterrupted
Access to the Genesys DX AI management (*.nanorep.co) will only be accessible through HTTPs
In-product announcements will be present to raise awareness of this change
Important: Any widget script using HTTP only will need to be changed by this date in order to continue uninterrupted.
As part of the transformation to Genesys DX, the product interfaces are now rebranded to reflect this change. Logos, product names, and company links are now updated to Genesys branding and is present within each of the product interfaces.
Using the "getEstimatedWaitTime" API call will provide the estimated wait time that the visitor would spend waiting before starting a live chat with an agent.
Details on using this API can be located in this article.
Bold360 version 21.11 contains the following new enhancements:
New KB Launchpad Intent Library for COVID-19/Vaccinations
In order to help businesses with providing just-in-time information related to updates to COVID-19 and vaccination protocols, a new entry in the KB Launchpad is now available with intents that can be used to deploy knowledge to keep your workforce informed of new policies and information that you may need to enforce.
Not familiar with the KB Launchpad? The KB Launchpad contains pre-defined intent libraries to help you add industry and use-case specific questions/intents to your KBs with your own specific responses to help with adding commonly asked questions for newly created KBs.
We will be enabling the KB Launchpad as a default setup option on all accounts shortly but contact your Account or Success Manager to get it enabled early if necessary.
ICO Cookie Compliance
In order to support ICO cookie compliance in regions that require end-user consent for allowing cookies to be set, Genesys DX now complies with this standard by making the tracking and analytics related cookies that are set through the touchpoint and visitor monitoring HTML snippets to be optional.
By default, all cookies will continue to be set upon page load. To restrict these cookies from loading automatically and only upon end-user consent, additional steps will be required on the website that the Genesys DX code is being deployed to.
You can learn more about what this compliance is and how to update your Genesys DX deployment to be compliant by reviewing the details in this article: ICO Cookie Compliance.
Every year, Genesys® orchestrates billions of remarkable customer experiences for organizations in more than 100 countries. Through the power of our cloud, digital and AI technologies, organizations can realize Experience as a Service℠, our vision for empathetic customer experiences at scale. With Genesys, organizations have the power to deliver proactive, predictive, and hyper personalized experiences to deepen their customer connection across every marketing, sales, and service moment on any channel, while also improving employee productivity and engagement. By transforming back-office technology to a modern revenue velocity engine Genesys enables true intimacy at scale to foster customer trust and loyalty.
Copyright © 2022 Genesys. All rights reserved.
Terms of Use | Privacy Policy | Email Subscription | Accessibility Feedback | Cookie Preferences