How do I create a widget on Glassix?

Agent workspace widgets apps

Agent widgets are a specific type of app that makes it easy for agents to see the right information and take quick actions to support your users or convert your leads. They are great for streamlining existing workflows and enabling new ones by bringing other services into the Inbox.

Let’s say that your agents use a knowledgebase or an external CRM, while they are chatting. Instead of accessing it in a separate window, you can add a widget that displays the CRM for use in the conversation details in your workspace.

Allowing agents to quickly view and utilize the information they need at any given moment.

Iframes

Widgets are iframes shown in the agent's workspace. Each widget is comprised of:

  • Name of the widget app
  • URL of the webpage or external application that you wish to display within the widget.
  • Default height of the widget, in pixels.
  • widget app Id
  • Secret
  • Type

Here we've built a widget app that shows the company's info based on the customer's email address.

On each ticket, an iframe will appear with the source of the URL you have defined, with additional query string parameters:

applicationId

UUID of your app widget

departmentId

same as the API key

ticketId

type

"TicketDetailsPanel"

locale

en\es\he

userName

The user name of the logged in agent

token

JWT token (hmac sha512) signed with your app secret.

The token contains as claims the applicationId, departmentId and ticketId.

Using the token you can make sure that the request to your iframe is legitimate.

Here's an example of an iframe source with all the parameters:

https://www.example.com/your-iframe.html?applicationId=a5db986f-dad8-4170-b7e4-3c453a50c887&departmentId=eea74d6e-da20-4d0c-a9ce-ed164e31b5d1&locale=en&ticketId=733393&token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8y&type=TicketDetailsPanel&userName=lyndon.pearson@company.com

embedded-app-iframe.js

Add the following script in your HTML document header, which will take care of the iframe styling and automatic height resizing based on the content.

<script src="https://cdn.glassix.com/clients/embedded-app-iframe.js"></script>

Styling

The font family, font size, and more should match the styling of the agent's workspace. Adding the "embedded-app-iframe.js" script to the document header will take care of the styling.

The "embedded-app-iframe.js" script will call this function when it's done loading all the resources.

    <script>
window.onDoneLoadingResources = function () {

}
</script>

Height

The height of the iframe is determined by the default height you have defined. The downside of an iframe is that its height is not dynamic according to the content inside it. "embedded-app-iframe.js" will detect height changes and update the parent window that the height has changed.

Full example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Security-Policy" content="block-all-mixed-content" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />
<script src="https://cdn.glassix.com/clients/embedded-app-iframe.js"></script>
<title></title>
</head>
<body>
<h3>McDonald's</h3>
<p>McDonald's Corporation operates and franchises McDonald's restaurants worldwide.</p>
Oak Brook, Illinois, United States
10001+
Public
<a href="https://www.mcdonalds.com" target="_blank">www.mcdonalds.com</a>
6,592
</body>
</html>

A few notes:

  • Make sure that the X-Frame-Options header is not enabled.
  • As Glassix runs on HTTPS, your iframe must be served from HTTPS as well.


How did we do?

Powered by HelpDocs (opens in a new tab)