Glia.com is a 'digital customer service platform that allows you to support your customers better'.
You can now integrate LemonadeLXP's Digital Academy into the flow of your Glia conversations to provide your customers with an enhanced online help experience.
Are they asking for help with a digital feature, or perhaps with a matter that would typically involve co-sharing a sensitive space?
Easy.
Inject Digital Academy content right into the flow of conversation, putting all of your digital transformation resources at their fingertips.
Prerequisite
This article assumes that you have already installed the Glia chat system on a webpage. After you have the Glia chat system working, enhance its functionality with the instructions provided in this article.
Installing the Extension
On the LemonadeLXP side, it's a straightforward task:
first, we compile a static version of your academy
second, we download a complied Glia 'Applet' (Glia terminology)
Step 1: Compiling, and Generating the Glia Applet
Visit your LemonadeLXP Admin Panel under the Settings > Digital Academy section to get started.
If your Digital Academy is multi-lingual, select the targeted language before proceeding.
Click on the Content Configuration section.
Click on the Acceleration section in the main area.
Publish & Create Version to compile a Javascript search library to the LemonadeLXP cloud.
Download Glia Applet HTML. This downloads a Glia-formatted page that you will use in the following steps. This script was automatically wired to leverage the search library you compiled at step 4.
💡Note: You now have a Glia-ready applet in your downloads folder.
Step 2: Install the Glia Applet
These actions take place in the Glia applet area; getting there is a bit tricky. Here's a video to help you get to the area where the following instructions are carried out:
Step 3: Upload the Applet
Once you are at the Applet Config area:
Click on "Add Applet", top right.
Enter the following field values:
Name: LemonadeLXP
Description: (anything you like)
Upload an HTML file with applet source code: Find the glia applet file you generated with LemonadeLXP in your Downloads folder.
Click Save.
Step 4: Create a Layout
Starting from where we left off at step 3 above, click on the Layouts tab at top right. You probably have a Layout already configured, you can edit this layout, or choose to create a new one (contact Glia support for help with this).
Within the Layout editor, click on Add Applets. This will open the "Add Applets to Layout" modal:
Add the LemonadeLXP applet.
Click Done in the Modal Window
Click Save at bottom right.
You're done! 🎉
Now, when clients engage with you via Chat, you can use the Applet to recommend Digital Academy content right within the flow of conversation!
Now that's a level-up! 👾
Display Rich Links on the User Side
Despite completing the steps above, additional programming/coding is necessary to display the rich Digital Academy links as pictures to your chat users.
When installing Glia, you are required to include their script tag on the pages that should host their chat box. Some added code is needed to instruct the Glia chat system on how to render rich messages.
For these steps, you will need your webmaster or dev team's assistance.
Two added components are required:
CSS Styles
The following styles must be added to the page code, or to a stylesheet that is loaded into pages that host the chat javascript:
<style>
.lxp-preview-container {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
padding: 10px !important;
background: #ccc !important;
border-radius: 12px !important;
margin-bottom: 10px !important;
}
.lxp-preview-container:hover {
cursor: pointer !important;
opacity: 0.8 !important;
}
.lxp-preview-container span {
display: block !important;
}
.lxp-preview-container .lxp-image-preview {
width: 100% !important;
height: 150px !important;
margin-bottom: 5px !important;
background-color: #ccc !important;
background-size: cover !important;
background-position: 50% !important;
border-radius: 6px !important;
}
</style>
Custom Script
Additionally, the Glia chat box itself must be augmented with this code that tells it how to render rich links. Note, this code must be added after the Glia script is loaded:
<script>
(function () {
sm.getApi({version: 'v1'}).then(glia => {
glia.visitorApp.setChatMessageRenderer(function (message) {
if (message.metadata && message.metadata.title) {
let container = document.createElement('a');
let text = document.createElement('span');
let image = document.createElement('div');
container.classList.add('lxp-preview-container');
image.classList.add('lxp-image-preview');
container.setAttribute("href", message.metadata.url);
container.setAttribute("target", "_blank");
image.style.backgroundImage = "url(" + message.metadata.preview + ")";
text.innerHTML = message.metadata.title;
container.append(image);
container.append(text);
return container;
}
return false;
});
});
})();
</script>
Complete Example
To demonstrate how all the parts fit together, this complete page script would operate as intended.
<!-- first, the custom styles -->
<style>
.lxp-preview-container {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
padding: 10px !important;
background: #ccc !important;
border-radius: 12px !important;
margin-bottom: 10px !important;
}
.lxp-preview-container:hover {
cursor: pointer !important;
opacity: 0.8 !important;
}
.lxp-preview-container span {
display: block !important;
}
.lxp-preview-container .lxp-image-preview {
width: 100% !important;
height: 150px !important;
margin-bottom: 5px !important;
background-color: #ccc !important;
background-size: cover !important;
background-position: 50% !important;
border-radius: 6px !important;
}
</style>
<!-- then, the Glia-provided chat javascript -->
<script src="https://api.glia.com/salemove_integration.js"></script>
<!-- lastly, the modification to show rich media cards -->
<script>
(function () {
sm.getApi({version: 'v1'}).then(glia => {
glia.visitorApp.setChatMessageRenderer(function (message) {
if (message.metadata && message.metadata.title) {
let container = document.createElement('a');
let text = document.createElement('span');
let image = document.createElement('div');
container.classList.add('lxp-preview-container');
image.classList.add('lxp-image-preview');
container.setAttribute("href", message.metadata.url);
container.setAttribute("target", "_blank");
image.style.backgroundImage = "url(" + message.metadata.preview + ")";
text.innerHTML = message.metadata.title;
container.append(image);
container.append(text);
return container;
}
return false;
});
});
})();
</script>
Digital Academy
You can also integrate the Glia Applet into your Digital Academy. Head to the admin section, under Settings > Digital Academy, copy the CSS styles above into the CSS injection box, and then use this snippet to load the Glia applet through the Javascript injection box:
$.getScript('https://api.glia.com/salemove_integration.js', () => {
(function () {
sm.getApi({version: 'v1'}).then(glia => {
glia.visitorApp.setChatMessageRenderer(function (message) {
if (message.metadata && message.metadata.title) {
let container = document.createElement('a');
let text = document.createElement('span');
let image = document.createElement('div');
container.classList.add('lxp-preview-container');
image.classList.add('lxp-image-preview');
container.setAttribute("href", message.metadata.url);
container.setAttribute("target", "_blank");
image.style.backgroundImage = "url(" + message.metadata.preview + ")";
text.innerHTML = message.metadata.title;
container.append(image);
container.append(text);
return container;
}
return false;
});
});
})();
});