RippleWidget : SmartQuiz

The RippleWidget SmartQuiz is a simple, customizable HTML5 questionnaire that responds to the Buyer’s input and sends the selection and other Buyer Data into your MA/CRM package when using SplashMaker+.

To see how to leverage it, let’s begin with the RippleWidget Dynamic Content page since that will be where you typically start the process of customizing these widgets for use in your content.

You’ll notice that this page is not published so that it won’t show up in your Personalization Form dropdown. It is here only to provide you the RippleWidget front-end code. When you enter the page you’ll see the widgets listed along with explanations of the code blocks and how to use them.

To customize the SmartQuiz, you will need to adjust the code in the following places…

Frontend Code

Input Questionnaire

The is the code with the various items and input options you’ll want to provide the Buyer. Let’s take a look below…

<div class="message"></div>
<div class="qes">
<div class="End" style="">
<div class="question-container">
<div>
<input type="checkbox" name="eu_priority[]" value="0" data-value="A. Advanced Threat Detection">
<label>A. Advanced Threat Detection</label>
</div>

<div>
<input type="checkbox" name="eu_priority[]" value="1" data-value="B. Information Centric Analysis">
<label>B. Information Centric Analysis</label>
</div>

<div>
<input type="checkbox" name="eu_priority[]" value="2" data-value="C. Cross-control point integrations">
<label>C. Cross-control point integrations</label>
</div>

<div>
<input type="checkbox" name="eu_priority[]" value="3" data-value="D. Threat Data normalization and correlation">
<label>D. Threat Data normalization and correlation</label>
</div>

<div>
<input type="checkbox" name="eu_priority[]" value="4" data-value="E. Integrated Cyber Defense Exchange">
<label>E. Integrated Cyber Defense Exchange</label>
</div>
</div>
</div>
</div>

To change what’s visible to the Buyer in the quiz, simply edit the label text between the carets (e.g. – …<label>XYZ</label>).

You can then also edit the input type to be either “checkbox” (which allows only one choice) – or “radio” (which allows multiple choices).

The values and numbers in the quotation marks (e.g. – value=”4″) just needs to provide sequential numbering to order things correctly.

The data values (e.g. – data-value=”X”) should either match the label or be something else. For example, if you are using the SplashMaker+MA/CRM package, these values will be passed through to your MA/CRM platform when selected. They don’t have to match the labels. How you use them is up to you.

As mentioned on the page, if you are using our SplashMaker+MA/CRM package, these items are pre-coded to be passed into your MA/CRM package. The only tweak you will need to make is determining where this data goes in your MA/CRM. See below for that information.

Backend Code

To edit the backend code you’ll need to go to the Plugins/Plugin Editor page in the WP Menu. Then select the SplashMaker plugin…

You’ll see the RippleWidgets component, under which you’ll find the backend php and js files that drive the widgets…

PHP Code

You’ll see comments in the code (“CONTENT CREATOR INPUT…”) that tell you want you need to change to affect how the widget looks and how it works.

For example, the first notation tells you how to adjust which items in the quiz will fire off a “Buyer Action Alert” in your MA/CRM package (when using SplashMaker+MA/CRM). This way if certain items show a higher sales qualification than others, you can easily alert the sales team within the MA/CRM platform by leveraging this data.

So make sure that when you change what’s in the front-end quiz, you come here and change these values as well.

JS Code

This code controls the data passage and response when the Buyer submits his/her answers. For example, you’ll see the CONTENT CREATOR INPUT 1 note about populating what exactly is passed into your MA/CRM platform when using SplashMaker+. (You shouln’t need to change anything here – but can do so if you know js code.)

In the same way, you can adjust the post-submission acknowledgment here with the CONTENT CREATOR INPUT 2 note…

That’s it! With these few tweaks, you have full control over how the SmartQuiz works – and how you can leverage the Buyer Data from these interactions in your MA/CRM platform when using SplashMaker+.