Upscope (co-browsing)
- Last updated on November 29, 2022 at 9:30 AM
Using some of the more powerful Dixa features, you can enable your agents to cobrowse with your website visitor during a live chat. This will enable them to see what your customer is seeing in real time.
This guide will take you through the steps needed to make cobrowsing through Upscope available inside Dixa - it's twofold: part of it needs to be added to your website code (alongside Upscope and Dixa's standard code), the other part we will do inside Dixa.
Add to your website
Make sure to have the Upscope and Dixa widget code added on all of your website pages.
Alongside the basic code provided by both platforms, in order to link the two together you will also have to add the following - it doesn't matter where you put it, but we'd recommend at the end of your page's source:
<script type="text/javascript"> | |
Upscope('getShortId', shortId => { | |
_dixa("api.setUserUrl", location.href + "#upscopeId=" + shortId); | |
}); | |
</script> |
If you need to be able to identify users based on their input in the Dixa chat widget in the session overview of Upscope, you could also add following, which will push the Dixa User ID and contact name into Upscope once a chat is requested - it can be placed anywhere (head/body) on your website's codebase:
<script type="text/javascript"> | |
const dixaUpscopeIdentify = function(payload) { | |
Upscope('updateConnection', { | |
uniqueId: payload.author.id, | |
identities: [payload.author.name, payload.author.id] | |
}); | |
_dixa("api.unsubscribe", "onMessageAdded"); | |
} | |
_dixa("api.subscribe", "onMessageAdded", dixaUpscopeIdentify); | |
</script> |
Once this is done, we can move onto the configuration inside the Dixa platform.
Add to Dixa
Inside Dixa you'll. need to be an admin user.
- Head into Settings->Integrations->API Tokens and generate a new Dixa API token for this integration - name it "Upscope Custom Card". Copy the token (starting with
ey
). - After that, go into Settings -> Integrations -> Custom Cards and create a new custom card.
- As a title, enter "Upscope" (or anything else logical, as long as your agents know what it is).
- As Authorization, enter
Bearer
followed by the token you copied in step 1. - As URL, enter the following:
https://dev.dixa.io/v1/conversations/{{ csid }}
- As template content, copy the following code:This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
<html> <head> <script type="text/javascript"> function getUpscopeId() { let dixaVisitorUrl = '{{data.browserInfo.originatingUrl}}'; if(dixaVisitorUrl.length > 0 && dixaVisitorUrl.substring(0, 8) == "https://") { //url provided, over https if(dixaVisitorUrl.lastIndexOf('#upscopeId=') > -1) { return dixaVisitorUrl.substring(dixaVisitorUrl.lastIndexOf('#upscopeId=')+11); } } return false; } </script> <style> .upscopeLink { position: relative; background-color: #5644d8; border: none; font-size: 14px; color: #FFFFFF; padding: 10px; margin: 0 20px 0 0; width: 95%; text-align: center; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; text-decoration: none; overflow: hidden; cursor: pointer; outline: 0; border-radius: 6px; appearance: button; text-decoration: none; font-weight: bold; } .upscopeLink:focus { outline: 0; } .upscopeLink:after { content: ""; background: #3f329d; display: block; position: absolute; padding-top: 300%; padding-left: 350%; margin-left: -20px!important; margin-top: -120%; opacity: 0; transition: all 0.8s } .upscopeLink:active:after { padding: 0; margin: 0; opacity: 1; transition: 0s } body { max-width: 300px; } div { margin: 10px 0 10px 0; } </style> </head> <body> <div> <a class="upscopeLink" id="sessionLink" href="#" target="_blank"> <span id="custom-card-send-text">Open screen share session</span> </a> </div> <div> <a class="upscopeLink" href="https://app.upscope.io/" target="_blank"> <span id="custom-card-send-text">Open Upscope visitor list</span> </a> </div> <span style="display: none;" id="noUpscopeWarning">Unfortunately, a remote session code isn't available for this conversation.</span> <script type="text/javascript"> const upscopeId = getUpscopeId(); if(!upscopeId) { document.getElementById('sessionLink').style.display = 'none'; document.getElementById('noUpscopeWarning').style.display = 'block'; } else { document.getElementById('sessionLink').href = 'https://app.upscope.io/w/' + upscopeId; } </script> </body> </html> - Make sure to save the custom card. Your configuration should look like this:
All done - you should be able to see 2 buttons now in a custom card, one to start the Upscope screen share with this particular customer, or when no screen share code is provided, just the other button taking you to the Upscope visitor list.
Any or all information is provided for informational purposes only. The Customer is responsible for the accuracy and completeness of the information provided herein, as well as for the security of the solutions. To the greatest extent possible, Dixa limits its liability for the use of this information, which is provided on an "as is" basis.