iFrame widget

Introduction

Widgets are the basic building blocks of dashboards, wallboards and activities in tabs. You can customise and define how the working space of each agent will look like. iFrame widgets can display an external web application in the agent's workspace. They can be used on dashboards where they are refreshed every few seconds, or they can be used when an agent is working on an activity in a tab.

The iFrame widget can hand variables to the child page via GET parameters containing information from the activity. The URL can contain attributes that are part of the contact center activity, with recommended parameters as follows:

Caller ID – phone number of the calling party to identify the customer within the CRM and pair the CRM activity to the account record.
Direction – keyword identifying direction of the activity (can contain “in”, “out” or “internal”).
Call ID – unique ID of the phone call.
Activity ID – unique ID of the activity.

Configure an iFrame Widget on the Dashboard

You can configure the widgets on the dashboard by going to Manage → Users → Accesses and click the Change in the Dashboard setting column.
Drag and drop the Page in iframe widget into the dashboard area and click on the settings of the widget.
Settings:
1. Title: Enter a title for Inframe.
2. URL: Enter the URL address.
3. Allow features: Control the Feature Policy, allowing the iFrame to access e.g. fullscreen, microphone, camera and geolocation. Enter e.g. "camera;microphone" to allow the iFrame to use them.
4. Height(px): et the iframe height in pixels.
5. Widget description: Enter a description of what information the widget is displaying. Typically used to differentiate between several widgets of the same type with different filters set up.
6. Display in: Choose places for your content to appear: App only, Browser only or Everywhere.
Enter the URL address and height of your application (which should be loaded into the iframe). You can use the query string parameters (see below the Parameters section) or set the iframe height in pixels.
You can go back to the dashboard to see the iFrame widget.

Configure an iFrame Widget in an Activity Tab

You can configure the widgets in the activity tab by going to Manage → Queues and clicking on the grey screen icon of the queue where you want to use the iFrame widget.

Drag and drop the Page in iframe widget into the dashboard area and click on the settings of the widget.

Field	Description
Title	Enter a title.
URL	In the URL, you can use parameters/variables that will be replaced by real values. E.g. "https://www.google.com/search?q=%27+aclUserData.user.title+%27 " where "+aclUserData.user.title+" will be replaced by the title of the user currently logged in.
Allow features	Control the Feature Policy, allowing the iFrame to access e.g. fullscreen, microphone, camera and geolocation. Enter e.g. "camera;microphone" to allow the iFrame to use them. See Feature Policy documentation for more info.
Height(px)	Enter a height of your application.
Widget description	Enter a description of what information the widget is displaying. Typically used to differentiate between several widgets of the same type with different filters set up.

When an agent answers a call, the iFrame widget is shown in their activity tab with the external application loaded.

Parameters – How to Use Them in iFrames

You can use activity parameters in the screen pop window. Use special syntax to access them.

In this example, we will set up a screen pop window for incoming calls. An echo service will open and return the parameters specified in the query string – phone number, agent name and queue name.

How to get the parameters for this example:

We are working with a call activity and such we have access to all values in the activitycall object.
Use the special syntax notation of '+item.propertyname+'.
If the <propertyname> is a type of object, you can access all properties of the inner object by using '+item.propertyobject.propertyname+' (example: '+item.id_agent.name+' )
This is the final url which we put into the screen pop window setup:

CODE

https://www.daktela.com/downloads/echo-service.php?callerid='+activity.item.clid+'&agents_name='+activity.user.title+'&queue_name='+activity.queue.title+'

If the activity is linked to a campaign record or CRM contact, it is also possible to use customFields values:

CODE

https://www.daktela.com/downloads/echo-service.php?record_first_name='+record.customFields.first_name[0]+'

https://www.daktela.com/downloads/echo-service.php?contact_bnet_id='+contact.customFields.bnet_id[0]+'

Some versions of Daktela use the {{item.propertyname}} syntax.

For more information about the templating language, see General information and tips.