Inweb Survey

Web component as a channel for CEM for CloudCherry users. Light weight, deploy and forget tool for online feedback collection.

Looking for subtle non-intrusive channel to collect feedback from online platforms? Inweb Survey (CC Nanosurvey) is here to help. Supports 'Yes/No', 'Star', 'Smiley' questions. This can be followed up with a 'Single Answer' drop down question.

Measure quality of your website content or find out what went wrong with online experience. Correlate this data with CEM data from other channels. Take necessary course correction. Delight your customers.

Reach out to Support ([email protected]) to deploy this channel in bulk for your brand.

Getting Started

To start using this channel within your web application, follow one of below methods.

Script Tag

• Add following script tags
  <script type="module" src='https://unpkg.com/inweb-survey/dist/inweb/inweb.esm.js'></script> <script nomodule src='https://unpkg.com/inweb-survey/dist/inweb/inweb.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc.

Node Modules

• npm install inweb-survey
• Put a script tag similar to this <script type="module" src='node_modules/inweb-survey/dist/inweb/inweb.esm.js'></script> <script nomodule src="node_modules/inweb-survey/dist/inweb/inweb.js"></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc.

In a stencil-app-starter app

• Run npm install inweb-survey --save
• Add an import to the npm packages: import inweb;
• Then you can use the element anywhere in your template, JSX, html etc.

Using this component

<cc-inweb id="widget-usability" question="How are you today?" token="PC-56874" question-id='5c272306c3d98742b0f7d577'>
</cc-inweb>

• question will be shown to user with thumbs up and down
• token - survey token from CloudCherry CEM platform
• question-id - id of the question from CloudCherry CEM platform

Prefill user information

Below the html tag, add the following code in a script tag

<script>
    // Sample usage for a section in a page
    // Avoid using inweb as variable name,it overwrites the global sdk

    var _inweb = document.querySelector('#widget-usability');

    _inweb.prefills = {
      '59f0762ed50981ce6442dab4': 'Alex',
      '5c272306c3d98742b0f7d576': 'Widgets',
    }
</script>

• prefills is a dictionary with keys as question ids from CloudCherry CEM Platform and values are the prefill answers
• These prefills will be submitted along with users response.

listen to response submission event

Every interaction to the component will emit an event on submission. Listen for cc-inweb-response event on the document as shown below

<script>
    document.addEventListener('cc-inweb-response', function ($event) {
      if($event.target.attributes.id === 'widget-usability'){
        <!-- react to response submission -->
      }
    })
</script>

$event.detail has the following payload

• question has the current question shown to us
• response is the user's choice of the answer. It would be 'true' or 'false'
• prefills prefills that was submitted along with response
• responseAsAnswer response as an answer format suitable for Cloudcherry CEM platform

Conditional Thank you text

Show different thank you texts based on user's response. Below script sets the property to the already added component.

<script>
  _inweb.conditionalThankYou = {
    'yes': 'Thank you for your positive feedback',
    'no': 'Sorry for the inconvinience'
  }
</script>

Hide icons

Not fond of thumbs? you can now show plain text instead of icons. Set the property 'icons' to 'hide'. This can be set in the html as property or set via Javascript

<script>
  _inweb.icons = 'hide';
</script>

Set a different identifier for cookie

You can set different cookie property for the component to use. Set in html using 'cookie-id' attribute or use the property 'cookieId' in JS

<script>
  _inweb.cookieId="my-cookie-name";
</script>

Throttle Survey for varying duration

Surveys are throttled by 3 days by default. You can set the attribute 'throttle-for-days' in html or set in Javascript using 'throttleForDays';

<script>
  _inweb.throttleForDays = 30;
</script>

Hide after submission

While throttling, you can choose to show the survey or hide it.

<script>
  _inweb.hideAfterSubmission = true;
</script>

Show followup question as drop down

You can show follow up options from each answer. This will show up once user answers a question. Add a followup question to post the response to.

_inweb.followUpQuestions = {
        Yes: ["Content", "Right to the point!"],
        No: ["Too Lengthy", "Does not makes sense"]
      };
_inweb.followUpQuestionId = "5c272306c3d98742b0f7d577";

If you need these options to be recorded as two different questions, use the following syntax.

_inweb.followUpQuestions = {
        Yes: {
          id: "5c272306c3d98742b0f7d577", // Positive followup question id
          multiSelect: ["Content", "Right to the point!"]
        },
        No: {
          id: "5c272306c3d98742b0f7d578", // Negative followup question id
          multiSelect: ["Too Lengthy", "Does not makes sense"]
        }
      };
_inweb.followUpQuestionId = "5c272306c3d98742b0f7d577";

Use survey configuration from dashboard

You can use the survey configuration from the CloudCherry dashboard. It will pick the first question (primary) that is supported and render it inline."Star-5", "Smile-5", "Select". Any following Single Select question with tag 'follow-up' will be take as follow up question. You can configure the conditions in the platform to show different followup options. A follow up question can have only on condition to it (dependent on primary question). You will also be able to take advantage of partial submission (if enabled from dashboard).

 <cc-inweb id="feedback" use-token="true" token="MR-13286"></cc-inweb>

Customize the component for your brand

Use css variables to set custom styles to the component

| Variable name | Functionality | Default | | ------------------------ | :---------------------- | ------------------------------- | | --cc-inweb-color | Text color | #6a6a6a | | --cc-inweb-font-weight | Font Weight | 400 | | --cc-inweb-font-size | Font Size | 15px | | --cc-inweb-font-style | Font Style for text | italic | | --cc-inweb-yes-color | Color for Yes icon/text | --cc-inweb-color or #6a6a6a | | --cc-inweb-no-color | Color for No icon/text | --cc-inweb-color or #6a6a6a | | --cc-inweb-icon-size | Size of icons | --cc-inweb-font-size or 15px | | --cc-inweb-icon-margin | margin between icons | --cc-inweb-icon-margin or 6px |

Usage

Set style across the web page

<body style="--cc-inweb-color:blue">
</body>

Set style for one widget

<cc-inweb style="--cc-inweb-color: blue"></cc-inweb>

<cc-inweb style="--cc-inweb-color: red"></cc-inweb>

Position the follow up drop down

Show followup options above or below the question. By default, opens up above.

_inweb.position = 'above';
_inweb.position = 'below';

Multiline support

Show followup question with displayType as 'Multiline'