How To Embed a Quiz In An Email

We recommend adding the first question in your Klaviyo emails, this will get your existing email subscribers to engage with the quiz and start purchasing your products (as well as more data to personalize with in Klaviyo).

Add a Button to a Klaviyo Email (Modify the text, button, or add a background image). You will want one button for each quiz question

Add hyperlinks to each button. This is what each hyperlink would look like (replace {{Button Response Value}} with the quiz button value (like "Tops" or "Blue" or "Curly") https://YourDomain.com/pages/quiz?response={{ButtonResponseValue}}&email={{email}} The email field is Klaviyo's email field, it allows us to identify the user automatically.

Each button should have its own unique link (since each button will have a different response value for the quiz), so for example the links could look like this (if your quiz was asking for your favorite color):

Note: one major benefit to this is even if they don't fill out the rest of the questions, you still get the first quiz answer back into your Klaviyo data.

Login to Digioh and go to the Box Editor. In the Digioh quiz, we’d use Metadata to define which page should the user continue the quiz experience from. This Metadata should be configured on the widget-level of the quiz under the box settings.

Key: quiz_continuation
Value: ep2

Where value will be the extra page # where the user would resume the quiz experience from. (usually it would be the 2nd page of the quiz since the first question was already answered in your Klaviyo email)

Next, we will need to add some custom code in the “Custom JS” section of your Digioh account. You’ll also need to add box level JS snippet with ‘After DOM Ready’ hook which would be used to show the appropriate page for the user to resume the quiz experience:

const QUIZ_CONTINUATION_MD = api.getWidgetMetadata(boxapi.getId(), 'quiz_continuation');

const QUIZ_RESPONSE_MD = api.getWidgetMetadata(boxapi.getId(), 'quiz_response');

const response = api.getUrlParameter('response');

const user_email = decodeURIComponent(api.getUrlParameter('email'));

if(QUIZ_CONTINUATION_MD && QUIZ_RESPONSE_MD){

if(response && user_email){

api.setDataLayerValue('email', user_email);

api.setDataLayerValue(QUIZ_RESPONSE_MD, response);

boxapi.showPage(QUIZ_CONTINUATION_MD);

return false;

}else{

return;

}

If you want to pass this data directly to Klaviyo, you need to add a Klaviyo integration in Digioh and on the second question of the quiz which in this case will be ep2, you need to configure the Digioh custom app ‘Form AutoSubmit’ on the page level.

Key: form_autosubmit
Value: Integration ID

Where value would be the integration ID created for this specific use-case and you’ll need to set the Form submit action to ‘Do Nothing’. This way whenever the user lands on this page, the form will be submitted and the integration will be triggered with the data collected from the URL ie. quiz response & email.

Replace the integration_ID with the actual Id of your Klaviyo integration and you're done!