Customizing the Engagement Button
The Engagement Buttons of Live Assist for Microsoft Dynamics 365 are very customizable. In this article we see the following:
- How to implement a simple embedded button that your visitors can use to start an engagement;
- How to specifiy the look and feel of the embedded button.
Embedding a Pre-made Button
There are many different types of engagement—see Types of Engagement for help with selecting the best one. In this article we simple use an Embedded Button These are buttons that you can include in your page, that are intended to remain in-situ, but Sticky Button are also available. You need access to the web-code of your site to include your designed button.
Below is a very simple example page which includes a <div> tag used to enable the customized Live Assist for Microsoft Dynamics 365 engagement.
Start by creating a new engagement and specifying that we want to use an Embedded Button:
In the Engagement Studio, modify the button if necessary, and generate a <div>-tag which you can include on your site with the Live Assist for Microsoft Dynamics 365 tag:
Make sure that the Engagement is enabled:
Below is a sample of a simple web page for including the embedded Button:
The result looks like this:
Creating a Button from Scratch
If the Enagement Portal does not provide a button with a suitable look and feel, you can define your own using CSS/HTML. This provides a means for you to define your own branding. This is useful for customers who require their enagements to appear in a very specific way to their customers.
When creating the engagement, select the create one using the HTML engagement option.
This presents a DIV where you can include what is required:
It is important to ensure the data-LP-event="click" event is included in the element to initiate the Engagement when it is clicked, otherwise the engagement will not start when the button you have created is clicked by a visitor.
It is worth noting that <style>-tags are not supported, so any styling used should be specified within the main that the div will be hosted.
You can see the complete web page as follows:
The resultant engagement looks like this: