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

Introduction

This describes how to embed the morphii technology into a CMIX survey. This integration encapsulates most of the the coding needed. Note that this is not the only way to integrate morphii into a CMIX 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 integration only supported on modern browsers. No support for old browsers such as IE8.

Integration

One Morphii Question Per Page

If you survey only has one morphii question per page, it is recommend that you follow these steps. Create a new standard Text Fields question. Enter your question text in the Question Text field. Create 6 Response elements. They must have the following Response Text:

  • 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.)

Click on the View Javascript button to enter the integration code. More details of the properties that are in the _mIntegrationParams object are explained later in this document.

window['_mIntegrationParams'] = {
  account_id: '<ACCOUNT ID HERE>',
  client_key: '<CLIENT KEY HERE>',
  sub_account: {
    id: 'sub-client-id',
    name: 'Sub-Client-Name'
  },
  additional_info: {
    audience: 'customer',
    category: 'satisfaction',
    timing: 'post-event'
  },
  questions: [
    {
      id: 'Q4',
      comment: {
        show: true,
        required: false,
        maxlength: 512,
        label: {
          en: 'Please leave a comment'
        }
      },
      slider: {
        initial_intensity: 0.2,
        anchor_labels: {
          show: true
        }
      },
      instructions: {
        show: true
      },
      morphii_ids: [
        { id: '6387684990323101696' },
        { id: '6387687516724666368' },
        { id: '6387687738608865280' },
        { id: '6387686352809422848' },
        { id: '6387687641635434496' },
        { id: '6387687144609767424' },
        { id: '6387687069345202176' }
      ]
    }
  ]
};

// 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/v1/cmix-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");

Question Id

Multiple Morphii Questions Per Page

If a page in your survey will contain more than one morphii question, it is recommend that you follow these steps. When multiple morphii questions are on a page it is necessary to separate the integration Javascript code from the morphii questions so that the integration code is only loaded and executed once on the page load.

Create a new question using the Static elements type. Do not enter any text in the Question Text field. Use the View Javascript button to enter the integration code. More details of the properties that are in the _mIntegrationParams object are explained later in this document. Note that the _mIntegrationParams object contains a list of all the morphii questions on this survey page.

Question Id

window['_mIntegrationParams'] = {
  account_id: '<ACCOUNT ID HERE>',
  client_key: '<CLIENT KEY HERE>',
  sub_account: {
    id: 'sub-client-id',
    name: 'Sub-Client-Name'
  },
  additional_info: {
    audience: 'customer',
    category: 'satisfaction',
    timing: 'post-event'
  },
  questions: [
    {
      id: 'Q2',
      comment: {
        show: true,
        required: false,
        maxlength: 512,
        label: {
          en: 'Please leave a comment'
        }
      },
      slider: {
        initial_intensity: 0.2,
        anchor_labels: {
          show: true
        }
      },
      instructions: {
        show: true
      },
      morphii_ids: [
        { id: '6387684990323101696' },
        { id: '6387687516724666368' },
        { id: '6387687738608865280' },
        { id: '6387686352809422848' },
        { id: '6387687641635434496' },
        { id: '6387687144609767424' },
        { id: '6387687069345202176' }
      ]
    },
    {
      id: 'Q3',
      comment: {
        show: true,
        required: false,
        maxlength: 512,
        label: {
          en: 'Please leave a comment'
        }
      },
      slider: {
        initial_intensity: 0.2,
        anchor_labels: {
          show: true
        }
      },
      instructions: {
        show: true
      },
      morphii_ids: [
        { id: '6387684990323101696' },
        { id: '6387687516724666368' },
        { id: '6387687738608865280' },
        { id: '6387686352809422848' },
        { id: '6387687641635434496' },
        { id: '6387687144609767424' },
        { id: '6387687069345202176' }
      ]
    }    
  ]
};

// 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/v1/cmix-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");

Now create new standard Text Fields questions for each morphii question. Enter your question text in the Question Text field. Create 6 Response elements. They must have the following Response Text:

  • 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.)

Question Id

JavaScript

Below is canned JavaScript. There are multiple properties that need to be modified in the following code. The object must be assigned to window['_mIntegrationParams']. The following sections explain each property in the object.

  1. Morphii account_id and client_key values must be entered.
  2. The questions array needs to be updated. This is where morphiis are associated with each question. The morphii ids for each question may be different than the ones listed in this sample.
  3. Optional: The sub_account property with: id and name. This can be used to track internal client ids you may have.
  4. Optional: The additional_info property with: audience, category, and timing.
window['_mIntegrationParams'] = {
  account_id: '<ACCOUNT ID HERE>',
  client_key: '<CLIENT KEY HERE>',
  sub_account: {
    id: 'sub-client-id',
    name: 'Sub-Client-Name'
  },
  additional_info: {
    audience: 'customer',
    category: 'satisfaction',
    timing: 'post-event'
  },
  questions: [
    {
      id: 'Q2',
      comment: {
        show: true,
        required: false,
        maxlength: 512,
        label: {
          en: 'Please leave a comment'
        }
      },
      slider: {
        initial_intensity: 0.2,
        anchor_labels: {
          show: true
        }
      },
      instructions: {
        show: true
      },
      morphii_ids: [
        { id: '6387684990323101696' },
        { id: '6387687516724666368' },
        { id: '6387687738608865280' },
        { id: '6387686352809422848' },
        { id: '6387687641635434496' },
        { id: '6387687144609767424' },
        { id: '6387687069345202176' }
      ]
    }
  ]
};

// 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/v1/cmix-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');

Account Id and Client Key

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 Id and Name

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

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

The questions array contains objects that define the morphiis to use for specific questions.

var questions = [
  {
    id: 'Q2',
    comment: {
      show: true,
      required: false,
      maxlength: 512,
      label: {
        en: 'Please leave a comment'
      }
    },
    slider: {
      initial_intensity: 0.2,
      anchor_labels: {
        show: true
      }
    },
    instructions: {
      show: true
    },
    morphii_ids: [
      { id: '6387684990323101696' },
      { id: '6387687516724666368' },
      { id: '6387687738608865280' },
      { id: '6387686352809422848' },
      { id: '6387687641635434496' },
      { id: '6387687144609767424' },
      { id: '6387687069345202176' }
    ]
  },
  {
    id: 'Q3',
    comment: {
      show: true,
      required: false,
      maxlength: 512,
      label: {
        en: 'Please leave a comment'
      }
    },
    slider: {
      initial_intensity: 0.2,
      anchor_labels: {
        show: true
      }
    },
    instructions: {
      show: true
    },
    morphii_ids: [
      { id: '6387684990323101696' },
      { id: '6387687516724666368' },
      { id: '6387687738608865280' },
      { id: '6387686352809422848' },
      { id: '6387687641635434496' },
      { id: '6387687144609767424' },
      { id: '6387687069345202176' }
    ]
  }
];

id

The id property is the question id. This property is REQUIRED. This is the value you assign your standard Text Fields element.

Question Id

morphii_ids

The morphii_ids property is an array of morphii objects to use for the question. This property is REQUIRED.

  • id: This property is required. It is the unique id of the morphii.
  • name: This property is optional. The property that 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.

Example:

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

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

comment

The comment property is used to configure the comment field. This property is OPTIONAL.

  • show: Flag to display the morphii comment field or not. 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,
  maxlength: 10,
  label: {
    en: 'Please leave a comment',
    es: 'Por favor deja un comentario'
  }
};

slider

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

  • 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

The instructions property defines the options for the instruction text. This property is OPTIONAL.

  • 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

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

Exporting Survey Data

When exporting CMIX survey data, the morphii data will be included in the export. You can set the column names by adding a new layout to the export.

Samples

Below are a couple sample surveys that you can download and import into your environment as a starting point.

Sample Survey

This is a XML definition of a sample survey. The sample survey contains 4 pages and uses 4 morphii questions. Click the link below to download the XML file.

Download Sample Survey

Sample Javascript

Below is sample Javascript that contains only the required properties.

Download Sample Survey

window['_mIntegrationParams'] = {
  account_id: '<ACCOUNT ID HERE>',
  client_key: '<CLIENT KEY HERE>',
  questions: [
    {
      id: 'Q2',
      morphii_ids: [
        { id: '6387684990323101696' },
        { id: '6387687516724666368' },
        { id: '6387687738608865280' },
        { id: '6387686352809422848' },
        { id: '6387687641635434496' },
        { id: '6387687144609767424' },
        { id: '6387687069345202176' }
      ]
    }
  ]
};

// 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/v1/cmix-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