In Web channel for CloudCherry CEM platform
npm install inweb-surveyWeb 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 (support@getcloudcherry.com) to deploy this channel in bulk for your brand.
To start using this channel within your web application, follow one of below methods.
- Add following script tags
in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc.
- npm install inweb-survey
- Put a script tag similar to this
in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc.
- 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.
``
- 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
Below the html tag, add the following code in a script tag
`
- 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.
Every interaction to the component will emit an event on submission. Listen for cc-inweb-response event on the document as shown below
`
$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
Show different thank you texts based on user's response. Below script sets the property to the already added component.
`
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
`
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
`
`
Surveys are throttled by 3 days by default. You can set the attribute 'throttle-for-days' in html or set in Javascript using 'throttleForDays';
`
While throttling, you can choose to show the survey or hide it.
`
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";
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).
`
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 |
Set style across the web page
`
Set style for one widget
`
`
Show followup options above or below the question. By default, opens up above.
`
_inweb.position = 'above';
_inweb.position = 'below';
Show followup question with displayType as 'Multiline'