Skip to main content

Canvas conversation

Auvious can be also be loaded as a tab in the agent's conversation tabs, while a conversation is active. This is very usefull for phone calls that can escalate to co-browse conversations or digital connect conversations that can escalate to video.

You can find the auvious integration in Talkdesk AppConnect.

Workspace Designer​

Talkdesk offers an intuitive tool called Workspace Designer that allows you to quickly build, expand, and customize the ideal interface for every role in the contact center. To begin using Workspace Designer, you need to install the Workspace Designer application (app) in Workspace.

Once you have the Workspace Designer installed, visit the page by clicking the icon on the left sideba menu.

You can read more on what is Workspace Designer and the components here

Prerequisites​

  1. For our specific use case we will be using the 'Conversation app' component. You can install it by visiting Workspace Designer / Canvas.

  2. We will also need the installation id of auvious. A quick way to find the installation id is to open the apps menu (bottom left button) and open the auvious application. A new tab will open in your browser. You will need to quickly copy the url of the new tab, before the application redirects to authenticate. The url should look like this: 

https://auvious.video/welcome?talkdesk_installation_id=<your-installation-id>&talkdesk_user_id=<your-user-id>

Copy the value between talkdesk_installation_id= and &talkdesk_user... and keep it in your notes.

Create a card​

Click on 'Create card' and give it a name. Once you hit 'Create' you will be redirected to the automation designer to design the card.

Automation designer​

  • Open the { } Variables menu on the right.
  • Click on Add variable.
  • Name it installation_id.
  • In the Default value field paste the installation id that you have in your notes from the previous step.
  • Select Current automation as the source of the variable.
  • Confirm to close

From the components list on the left, find the Render View component and drag it on the designer. Double click the dropped component and on the menu on the right paste this code. 

<iFrame id="auvious" border="0px" width="100%" height="100%" sandbox="allow-scripts allow-same-origin allow-forms allow-modals allow-popups allow-downloads" allow="display-capture;fullscreen;microphone;camera" src={`https://auvious.video/welcome?talkdesk_installation_id=${Context.getVariable("installation_id")}&talkdesk_user_id=${Context.getVariable("active_user_id")}&cid=${Context.getVariable("interaction_id")}&cdestination=interaction-widget`} />

Last but not least, drag an arrow from the 'Default Exit' interface of the 'Card Trigger' to the 'Render View' you just created.

Once you're finished with the results click 'Save' and 'Publish'. You now have a new Card that you can assign to a Panel.

Co-browse standalone​

If you want to support a flow where the agent opens auvious, starts a co-browse sesssion and then shares the ticket with the customer, you can use the below code in the Render View component

<iFrame id="auvious" border="0px" width="100%" height="100%" sandbox="allow-scripts allow-same-origin allow-forms allow-modals allow-popups allow-downloads" allow="display-capture;fullscreen;microphone;camera" src={`https://auvious.video/welcome?talkdesk_installation_id=${Context.getVariable("installation_id")}&talkdesk_user_id=${Context.getVariable("active_user_id")}&cid=${Context.getVariable("interaction_id")}&cdestination=talkdesk-card&call-type=cobrowse&customer_id=${Context.getVariable("contact_id")}`} />

Panels​

Click on 'Create panel' to create a new panel that will host the card we just created. Once you give it a name and save it, click on the pencil to edit the panel. Click on 'Add card' and select the card we created above. Expand the card to occupy the entire screen. Click 'Save' and you are good to go.

Canvas​

Now it's time to assign the Panel to the Conversation Canvas.

Click on the configure (pencil) button on the far right of the 'Conversation app' in the Canvas page. You will be redirected to the Automation Designer.

Drop a Render Panel component to the area.

Give it a name and select the Panel we created above.

Finally connect the Canvas Trigger to the Render Panel.

Optionally you can select an Event Trigger in the 'Canvas Trigger'. For example show the card 'When a call is initiated'. Once you have selected an event, drag an arrow from the new interface (circle) to the 'Render Panel'.

Save and Publish.

You should now have a working card in the conversations app.