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. 

  1. 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). 
  2. After that, go into Settings -> Integrations -> Custom Cards and create a new custom card.
  3. As a title, enter "Upscope" (or anything else logical, as long as your agents know what it is).
  4. As Authorization, enter Bearer  followed by the token you copied in step 1. 
  5. As URL, enter the following:
    https://dev.dixa.io/v1/conversations/{{ csid }}
  6. As template content, copy the following code:
    <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>
  7. 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.


Custom Card when on a live chat with Upscope enabled on the website

 

Custom Card on channels without Upscope enabled


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.

Was this article helpful?

Help Center
Username
Dixa Support
System Status
Have a question?
Product Roadmap
Webinar Series
Dixa Academy