NOTE: This integration requires knowledge of the JavaScript programming language.

Introduction

This describes how to embed the morphii technology into a SurveyGizmo survey. This integration encapsulates most of the the coding needed. Note that this is not the only way to integrate morphii into a SurveyGizmo survey, but this document focuses on using the integration.

Limitations

The integration does have limitations. This does not mean that these things cannot be done, just they are limitations for this integration implementation.

  • The survey must use the standard layout for desktop and mobile interaction. This setting is found in the Survey Style Layout section.
  • Morphii questions cannot be hidden/shown via builtin SurveyGizmo question logic.
  • The integration only supported on modern browsers. No support for old browsers such as IE8.

Integration

Integration Script

Add a script tag for loading the SurveyGizmo integration in the Style -> HTML/CSS Editor -> Custom<Head> tab. Add the script tag:

<script src="https://survey-integration.morphii.com/v2/surveygizmo-integration.min.js"></script>

Script Tag

Morphii Questions

SurveyGizmo survey questions that are associated with the morphii widget should be Textbox List type questions. Create a new question by by choosing the Textbox List question type. Enter your question text in the “What question do you want to ask?” text field. You can also use this field to format your question text. In the “Multiple Choice Options” section you need to add the following options. Order does not matter.

  • id: The morphii id selected will be stored in this element.
  • name: The morphii name selected will be stored in this element.
  • intensity: The morphii intensity will be stored in this element.
  • part_name: The morphii part name will be stored in this element. This is useful when using bi-directional morphiis.
  • question: The question text associated with the morphii question will be stored in this element.
  • comment: The comment text will be stored in this element.(NOTE: This response element must be set as not Required.)
  • url_png: The URL to a PNG image that represent the morphii selected (with intensity). This field is optional.

Textbox List

Question ID

The integration requires the ID assigned to a question. The ID can be found in the Build tab for a survey.

Question Id

JavaScript Action

The integration requires that a JavaScript Action be added to each page that a morphii question is on. This is where the JavaScript code will reside to interface with the integration.

NOTE: The JavaScript Action MUST be inserted after the Morphii questions. It is recommended that the JavaScript Action element be the last element on the page.

JavaScript Action

JavaScript

Below is sample JavaScript which can be used in the “JavaScript Action” mentioned above. This sample code only shows the required properties. There are multiple properties to configure the integration. Each property is described in the the sections below.

The integration MUST be added to a property named _mIntegrationParams on the global window object. (window['_mIntegrationParams'] = { })

window['_mIntegrationParams'] = {
  account_id: '<ACCOUNT ID HERE>',
  client_key: '<CLIENT KEY HERE>',
  questions: [
    {
      id: '2',
      morphii_ids: [
        { id: '6533704109450043392_2' },
        { id: '6533717691772903424' },
        { id: '6533717823323430912' },
        { id: '6533717983040057344' },
        { id: '6533718112033349632' },
        { id: '6533718265862295552' },
        { id: '6533723337566945280' }
      ]
    }
  ]
};

// Do not modify the code below.
!function(a,b,c,d,e,f){function g(){a._morphiiIntegration&&a._morphiiIntegration.init()}function h(){e=b.getElementsByTagName(c);for(var a=0;a<e.length;a++)if(e[a].getAttribute("src")===f)return!0;return!1}f="https://survey-integration.morphii.com/v2/surveygizmo-integration.min.js",h()?g():(d=b.createElement(c),d.type="application/javascript",d.src=f,d.onload=g,b.body.appendChild(d))}(window,document,"script");

Integration Properties

Account Id and Client Key

(REQUIRED) The Vizbii team will provide the account id and client key when the account has been provisioned. These values will look something like:

var account_id = '15521928';
var client_key = 'db055eeb-af22-5c2b-b2df-e11eec55c789';

Sub Account

(OPTIONAL) The sub_account object can be used to track internal client ids you may have. These values will look something like:

var sub_account = {
  id: 'sub-client-id',
  name: 'Sub-Client-Name'
};

Additional Information

(OPTIONAL) The additional_info object contains information about items like audience, category, and timing. Valid property values:

  • audience: ‘customer’, ‘employee’, ‘patient’, ‘community’, ‘general’, ‘other’
  • category: ‘satisfaction’, ‘engagement’, ‘hr’, ‘mood’
  • timing: ‘pre-event’, ‘during-event’, ‘post-event’, ‘n/a’
var additional_info = {
  audience: 'customer',
  category: 'satisfaction',
  timing: 'post-event'
};

Questions Array

(REQUIRED) The questions array contains objects that define the configuration to use for each morphii question. These configurations include control over the comment field, slider, instruction text, and morphii to be displayed.

var questions = [
  {
    id: '2',
    comment: {
      show: true,
      required: false,
      maxlength: 512,
      label: {
        en: 'Please leave a comment'
      }
    },
    slider: {
      show_animation: true,
      anchor_labels: {
        show: true
      }
    },
    instructions: {
      show: true
    },
    selection: {
      required: false
    },
    intensity: {
      required: false
    },    
    morphii_ids: [
      { id: '6202184382145363968', name: { en: 'Excited' } },
      { id: '6362666072115564544', name: { en: 'Delighted' } },
      { id: '6363734358316589056', name: { en: 'Frustrated' } },
      { id: '6362674737212084224', name: { en: 'Surprised' } },
      { id: '6363735117617217536', name: { en: 'Disgusted' } },
      { id: '6363735353273270272', name: { en: 'Worried' } },
      { id: '6363488681244622848', name: { en: 'Disappointed' } },
      { id: '6202184384594837504', name: { en: 'Meh' } }
    ]
  }
];
id

(REQUIRED) The id property is the question id. This can be found in the Build tab for the survey.

Question Id

morphii_ids

(REQUIRED) The morphii_ids property is an array of morphii objects to use for the question. The object contains the following properties:

  • id: This property is required. It is the unique id of the morphii.
  • name: This property holds the morphii name for each supported language. Each translation is defined separately. The en translation of the name is required if any other language is declared. If omitted the default morphii name will be used.
  • weight: An arbitrary integer value assigned to this morphii. If omitted the value will be 0. Setting this property is helpful if using the morphii selection callback.

You can see a list of available morphiis here: https://docs.morphii.com/morphii_list.html

Example:

// Define custom names.
var morphiiIds1 = [
  {
    id: '6363734358316589056',
    name: {
      en: 'Angry',
      es: 'Enojado'
    },
    weight: 1
  },
  {
    id: '6362666072115564544',
    name: {
      en: 'Happy',
      es: 'Contento'
    },
    weight: 2
  },
  {
    id: '6363488681244622848',
    name: {
      en: 'Sad',
      es: 'Triste'
    },
    weight: 3
  }
];

// Use default names.
var morphiiIds2 = [
  { id: '6363734358316589056' },
  { id: '6362666072115564544' },
  { id: '6363488681244622848' },
  { id: '6363735117617217536' },
  { id: '6362674737212084224' }
];
comment

(OPTIONAL) The comment property is used to configure the comment field. It contains the properties:

  • show: Flag to display the morphii comment field or not. Default: false
  • required: Flag to mark comment field as required. Default: false
  • maxlength: The max character length of the comment field. Default: 512
  • label: The property that holds the text in each supported language. The label above the comment field. Each translation is defined separately. The en version of the label is required if any other language is declared. Default: Please leave a comment

Example:

var comment = {
  show: true,
  required: false,
  maxlength: 10,
  label: {
    en: 'Please leave a comment',
    es: 'Por favor deja un comentario'
  }
};
slider

(OPTIONAL) The slider property is used to configure the the initial intensity, the slider animation, and anchor text.

  • initial_intensity: The initial intensity of the morphii when selected. The number must be between 0 and 1. Default: 0.2
  • show_animation: Flag to animated the slider/morphii when selected. Default: false.
  • anchor_labels: This property defines the options for the anchor text on each side of the slider.
    • show: This property is the flag to show the anchor text. Value is true or false. Default: true.
    • left: This property is used to override the default text for the left anchor text. Each translation is defined separately. The en version of the label is required if any other language is declared.
    • right: This property is used to override the default text for the right anchor text. Each translation is defined separately. The en version of the label is required if any other language is declared.

Example:

var slider = {
  initial_intensity: 0.2,
  show_animation: true,
  anchor_labels: {
    show: true,
    left: {
      en: 'Less intense',
      es: 'Menos intenso'
    },
    right: {
      en: 'More intense',
      es: 'Mas intenso'
    }
  }
};
instructions

(OPTIONAL) The instructions property defines the options for the instruction text.

  • show: This property is the flag to show the instruction text. Value is true or false. Default: true.
  • pre_select_label: This property is used to override the default text for the instruction text that is displayed when a morphii selection has not been made. Each translation is defined separately. The en version of the label is required if any other language is declared.
  • post_select_label: This property is used to override the default text for the instruction text that is displayed when a morphii is selected. Each translation is defined separately. The en version of the label is required if any other language is declared.

Example:

var instructions = {
  show: true,
  pre_select_label: {
    en: 'Select the graphic above that best represents how you feel.',
    es: 'Seleccione el gráfico de arriba que mejor represente cómo se siente.'
  },
  post_select_label: {
    en: "Move the slider to show how intense your feeling is.",
    es: "Mueva el control deslizante para mostrar qué tan intenso es su sentimiento."
  }
};
morphii_show_name

(OPTIONAL) The morphii_show_name property is used to configure if the morphii label is displayed or not. This defaults to true if not set. The property is used when using bi-directional morphiis in the survey.

selection

(OPTIONAL) The selection property is used to require a morphii be selected for this morphii question. The default is false.

Example:

var selection = {
  required: false
};
intensity

(OPTIONAL) The intensity property is used to require the intensity be set for this morphii question. The default is false.

Example:

var intensity = {
  required: false
};

Exporting Survey Data

When exporting SurveyGizmo survey data to a CVS, the morphii data will be included in the export. The columns will map to the Textbox List fields that you created in the survey.

Data Export

Testing

When testing your SurveyGizmo survey, add the query string parameter preview=true to the survey URL. This will mark reaction results as testing and omit them in final analysis results. For example: http://www.surveygizmo.com/s3/4945218/sample?preview=true

Sample Survey

The following is a sample SurveyGizmo survey. The JavaScript for this sample is below.

JavaScript

Below is the JavaScript for the each page of the survey.

Page 2

window['_mIntegrationParams'] = {
  account_id: '<ACCOUNT ID HERE>',
  client_key: '<CLIENT KEY HERE>',
  sub_account: {
    id: 'doc-site',
    name: 'Morphii Documentation Site'
  },  
  additional_info: {
    audience: 'customer',
    category: 'satisfaction',
    timing: 'post-event'
  },
  questions: [
    {
      id: '9',
      comment: {
        show: true
      },
      morphii_ids: [
        { id: '6533704109450043392_2' },
        { id: '6533717691772903424' },
        { id: '6533717823323430912' },
        { id: '6533717983040057344' },
        { id: '6533718112033349632' },
        { id: '6533718265862295552' },
        { id: '6533723337566945280' }
      ]
    }
  ]
};

// Do not modify the code below.
!function(a,b,c,d,e,f){function g(){a._morphiiIntegration&&a._morphiiIntegration.init()}function h(){e=b.getElementsByTagName(c);for(var a=0;a<e.length;a++)if(e[a].getAttribute("src")===f)return!0;return!1}f="https://survey-integration.morphii.com/v2/surveygizmo-integration.min.js",h()?g():(d=b.createElement(c),d.type="application/javascript",d.src=f,d.onload=g,b.body.appendChild(d))}(window,document,"script");

Page 3

window['_mIntegrationParams'] = {
  account_id: '<ACCOUNT ID HERE>',
  client_key: '<CLIENT KEY HERE>',
  sub_account: {
    id: 'doc-site',
    name: 'Morphii Documentation Site'
  },  
  additional_info: {
    audience: 'customer',
    category: 'satisfaction',
    timing: 'post-event'
  },
  questions: [
    {
      id: '10',
      comment: {
        show: true
      },
      morphii_ids: [
        { id: '6533704109450043392_2' },
        { id: '6533717691772903424' },
        { id: '6533717823323430912' },
        { id: '6533717983040057344' },
        { id: '6533718112033349632' },
        { id: '6533718265862295552' },
        { id: '6533723337566945280' }
      ]
    }
  ]
};

// Do not modify the code below.
!function(a,b,c,d,e,f){function g(){a._morphiiIntegration&&a._morphiiIntegration.init()}function h(){e=b.getElementsByTagName(c);for(var a=0;a<e.length;a++)if(e[a].getAttribute("src")===f)return!0;return!1}f="https://survey-integration.morphii.com/v2/surveygizmo-integration.min.js",h()?g():(d=b.createElement(c),d.type="application/javascript",d.src=f,d.onload=g,b.body.appendChild(d))}(window,document,"script");

Page 4

window['_mIntegrationParams'] = {
  account_id: '<ACCOUNT ID HERE>',
  client_key: '<CLIENT KEY HERE>',
  sub_account: {
    id: 'doc-site',
    name: 'Morphii Documentation Site'
  },  
  additional_info: {
    audience: 'customer',
    category: 'satisfaction',
    timing: 'post-event'
  },
  questions: [
    {
      id: '11',
      comment: {
        show: true
      },
      morphii_ids: [
        { id: '6533704109450043392_2' },
        { id: '6533717691772903424' },
        { id: '6533717823323430912' },
        { id: '6533717983040057344' },
        { id: '6533718112033349632' },
        { id: '6533718265862295552' },
        { id: '6533723337566945280' }
      ]
    }
  ]
};

// Do not modify the code below.
!function(a,b,c,d,e,f){function g(){a._morphiiIntegration&&a._morphiiIntegration.init()}function h(){e=b.getElementsByTagName(c);for(var a=0;a<e.length;a++)if(e[a].getAttribute("src")===f)return!0;return!1}f="https://survey-integration.morphii.com/v2/surveygizmo-integration.min.js",h()?g():(d=b.createElement(c),d.type="application/javascript",d.src=f,d.onload=g,b.body.appendChild(d))}(window,document,"script");

Page 5

window['_mIntegrationParams'] = {
  account_id: '<ACCOUNT ID HERE>',
  client_key: '<CLIENT KEY HERE>',
  sub_account: {
    id: 'doc-site',
    name: 'Morphii Documentation Site'
  },  
  additional_info: {
    audience: 'customer',
    category: 'satisfaction',
    timing: 'post-event'
  },
  questions: [
    {
      id: '12',
      morphii_ids: [
        { id: '6533723521351159808' },
        { id: '6533723671591751680' },
        { id: '6533723841286062080' },
        { id: '6533723983905464320' }
      ]
    }
  ]
};

// Do not modify the code below.
!function(a,b,c,d,e,f){function g(){a._morphiiIntegration&&a._morphiiIntegration.init()}function h(){e=b.getElementsByTagName(c);for(var a=0;a<e.length;a++)if(e[a].getAttribute("src")===f)return!0;return!1}f="https://survey-integration.morphii.com/v2/surveygizmo-integration.min.js",h()?g():(d=b.createElement(c),d.type="application/javascript",d.src=f,d.onload=g,b.body.appendChild(d))}(window,document,"script");
Tags: documentation survey_integrations