Overview

The FullStory App for Desk.com lets you get a link inside the Desk.com ticket UI to the specific playable session associated with the filing of a ticket via the Desk.com email widget.

 

How it Works

Adding the FullStory to your Desk.com account involves some configuration changes as well as an update to the widget that you use to send tickets into Desk.

Instructions

From the Admin panel in Desk.com:

1. On the Cases tab, navigate to Cases > Custom Fields and create a new field with the following information:

• Name: FullStory Session • Key: fs_session • Data Type: text

2. On the same tab, navigate to Integration URLs and click Add Integration URL. Enter the following:

• Name: FullStory Session • Description: View the user's session in FullStory • Open Location: New browser window • URL: https://{{case.custom_fs_session}} • Enabled: Yes

3. On the Channels tab, navigate to Support Center > Overview and click Edit Settings. Set “Allow Frame Embedding” to on and save.

Widget updates

On the Channels tab of the admin panel, navigate to Email > Widgets. If you are already using a custom theme, click on the theme to begin editing it. Otherwise, use the Add Theme button to create a new custom theme.

1. Name the theme ("FullStory Widget", for example).
2. In the Header box, find the style tag and add the following style just before the <\style> tag:

.fs_session {
  display:none;
}

• Add the following item inside the first div in the Body box and then click Update your widget:

<div class="input fs_session"><span class="form_label">FS Session:</span>
  {{ ticket_custom_fs_session }}
</div>

• After saving, click the Default button next to your FullStory widget to set it as the default.
• Okay, here's the crucial part: to get the FullStory session link sent back in a user ticket, you'll have to modify the default widget code to set the custom session field when the widget is added to your site. If you click the Embed code button, you'll see the generated code to add to your site, which contains a function call that looks like: new DESK.Widget({......}).render(). There are 2 changes that you will need to make to this code.
  1. This call needs to happen inside the _fs_ready function instead of in your main JavaScript. This ensures that a unique FullStory link has been generated for the session before you initialize the Desk.com widget. You should end up with something that looks like this:
  
  
  

  var _fs_ready = function() {
    var currentSessionUrl = FS.getCurrentSessionURL();
    currentSessionUrl = currentSessionUrl.split("://")[1];
    new DESK.Widget({......}).render();
  };

• Now we need to make a couple of small changes to what appears inside thatnew DESK.Widget({......}).render() call. First, add a reference to the container element for your Desk.com widget:

  new DESK.Widget({
    id: "deskWidgetId",
    .....
  }).render();

  Make sure that the id on the HTML element matches the name that you put in the "id" field. Second, you need to set the value of the new custom URL field. Within the call tonew DESK.Widget({......}).render() , you should find a references to fields:{ ticket: {...}}. Add a reference to the custom URL like so:

  fields: {
    ticket: {
      custom_fs_session: currentSessionUrl
    }, ...

  If you already have other items inside fields.ticket, just add custom_fs_session at the end.

• The end result of these widget updates should look something like this:

<script>
  // The FullStory script contents need to be here.
  // The _fs_ready function that you will need to add is below.

  var _fs_ready = function() {
    var currentSessionUrl = FS.getCurrentSessionURL();
    currentSessionUrl = currentSessionUrl.split("://")[1];

    new DESK.Widget({
      version: 1,
      id: "deskWidgetId",  // The id of the HTML element in which you want to render the Desk.com widget
      site: 'your_desk_page.desk.com',
      port: '80',
      type: 'email',
      displayMode: 1,  //0 for popup, 1 for lightbox
      features: {},
      fields: {
        ticket: {
          // Any other Desk.com ticket fields that you want to show
          custom_fs_session: currentSessionUrl
        },
      }
    }).render();

  }  // Don’t forget to close the _fs_ready function
</script>

This code makes sure that the session field is invisible to the user but is populated by FullStory, so that you get a session link when you view the ticket in Desk.com. When you open a case, The FullStory session link will now appear in the Info Links menu.

Related Content

Desk.com Configuration Instructions