How to Send Quiz Results to Gmail using Zapier | Lantern

In this article, we're going to show you how to send Lantern quiz results to Gmail using Zapier, providing an easy and efficient way to automate customer interactions.

Please note that this Zap is a bit technical, as it requires the use of both JavaScript and HTML. Templates are provided for you and can be copied and pasted with no necessary further requirements or edits to fully set this up, however, we recommend having a bit of familiarity with these languages to ensure everything runs smoothly.

Step 1: Create a New Zap

Start by creating a new Zap in your Zapier account. Once you’ve logged into Zapier:

1. Click on Create

2. Give your Zap a descriptive name, such as “Send Quiz Results to Gmail.”

Step 2: Set Up the Trigger

The trigger is the event that initiates the Zap. In this case, the trigger will be when a quiz is completed in the Lantern Quiz App.

1. Click on Trigger and search for the Lantern Quiz App.

2. Select Quiz Completion as the trigger event. This means the Zap will start every time a quiz is completed.

3. When connecting your account for the first time, you’ll be prompted to enter your Shopify URL and Quiz API Key.

To get your API key, head to Lantern, go to the Integrations section and click Reveal to copy it.

4. After connecting your Lantern account, select the specific quiz you want to use in the integration.

5. Make sure the trigger is set to True so that it activates only when an email address is capture during the quiz.

6. Finally, once the trigger is set, test it to ensure Zapier can pull the quiz completion data successfully. If the test is successful, you’re ready to move to the next step.

Step 3: Retrieve Product and Quiz Data

Before sending the quiz results to Gmail, you need to gather the relevant data from the quiz, including product details and the customer’s answers.

1. Add a new Action step and select Code by Zapier.

2. Choose Run JavaScript as the action event. This will allow you to loop through the quiz data and collect the necessary information for the email.

3. In the next step, you’ll store important data points, such as:

Product Titles- in the Input Data box create variable name productTitles and map the Products Title Lantern data using the '/' to open the drop-down menu. Once done, click +Add a new value set and repeat the process.

Product Images- in the input box create the variable name productImages and map the Products Image data
Product Prices - in the input box create the variable name productPrices and map the Products Price Amount data
Product URLs - in the input box create the variable name productUrls and map the Products Url data
Questions - in the input box create the variable name questions and map the Answers Questions data
Answers - in the input box create the variable name answers and map the Answers Answers data

4. Once you’ve defined the variables for each data point, copy and paste the following JavaScript code into the input field in Zapier.

const {
  productTitles = '',
  productImages = '',
  productPrices = '',
  productUrls = '',
  questions = '',
  answers = ''
} = inputData || {};

const splitOrEmpty = (str) => str ? str.split(',') : [];

const productTitlesArray = splitOrEmpty(productTitles).slice(0, 3);
const productImagesArray = splitOrEmpty(productImages).slice(0, 3);
const productPricesArray = splitOrEmpty(productPrices).slice(0, 3);
const productUrlsArray = splitOrEmpty(productUrls).slice(0, 3);
const questionsArray = splitOrEmpty(questions);
const answersArray = splitOrEmpty(answers);

const createRow = (data, template) => data.map(template).join('');

const imagesRow = `<tr>${createRow(productImagesArray, (image, i) => `
    <td style="text-align: center; vertical-align: top; width: 25%;">
        <img src="${image}" alt="${productTitlesArray[i]}" style="width: 80%; height: auto;"/>
    </td>`)}
</tr>`;

const titlesRow = `<tr>${createRow(productTitlesArray, title => `
    <td style="text-align: center; vertical-align: top; width: 25%;">
        <div style="font-size: 16px; font-weight: bold; margin-top: 15px;">
            ${title}
        </div>
    </td>`)}
</tr>`;

const pricesRow = `<tr>${createRow(productPricesArray, price => `
    <td style="text-align: center; vertical-align: top; width: 25%;">
        <div style="font-size: 14px; color: #666; margin-top: 10px;">
            £${price}
        </div>
    </td>`)}
</tr>`;

const urlsRow = `<tr>${createRow(productUrlsArray, (url, i) => `
    <td style="text-align: center; vertical-align: top; width: 25%;">
        <div style="background-color: #3600a1; color: white; width: 111px; padding: 5px 10px; border-radius: 3px;margin: auto">
            <a href="${url}" style="color: white; text-decoration: none;" target="_blank">Buy now</a>
        </div>
    </td>`)}
</tr>`;

const questionsHtml = `
<tr>
    <td style="padding:0;" colspan="100%">
        <br/><br/><br/>
        <h2 style="color: #3600a1; font-size: 20px; text-align: start; font-weight: bold; margin: 0;">
            Your Quiz Answers
        </h2>
        <br/>
        <div style="text-align: left;">
            ${createRow(questionsArray, (question, i) => `
            <div style="margin-bottom: 15px;">
                <h3 style="color: #332233; font-weight: bold; margin: 0;">
                    ${question}
                </h3>
                <p style="color: #727272; font-size: 16px; margin: 5px 0 0;">
                    ${answersArray[i]}
                </p>
            </div>`)}
        </div>
        <p style="text-align: start; color: #646466; font-size: 16px; margin: 0;">
            If you have any questions, please contact us at 
            <a href="mailto:{{email}}" style="color: #3600a1; text-decoration: none;">{{email}}</a>
        </p>
    </td>
</tr>`;

const htmlContent = imagesRow + titlesRow + pricesRow + urlsRow + questionsHtml;

return { htmlContent };

5. Click Continue and run a test to verify that the JavaScript is pulling and organizing data correctly. This ensures all relevant information will be available for the email.

Step 4: Configure Gmail to Send Quiz Results

Now that the quiz data has been retrieved, it’s time to set up the Gmail action, which will send the quiz results to the recipient.

1. Add another Action step and search for Gmail.

2. Select Send Email as the action event.

3. Connect your Gmail account, or choose an already connected account.

4. Configure the email fields:

In the To field, select the recipient’s email address from the quiz completion data.
In the From field, enter the email address you want to send from (e.g., your company’s email or a designated support email).
Customize the Subject line, possibly pulling dynamic content from the quiz event, such as the quiz name.

5. In the Body section, set the Body Type to HTML

Paste in the HTML template provided, where you can customize elements like your company’s logo, formatting, and overall design.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
    <div style="width:100%;max-width:600px;text-align:center;padding-left: 20px;padding-right: 20px;">
        <table role="presentation" border="0" cellspacing="0" width="100%">
            <tr>
                <td align="center" style="padding:0;">
                    <img src="{{add-logo-url-here}}" alt="logo" width="{{add-logo-width-here}}" style="display: block;"/>
                </td>
            </tr>

            <tr>
                <td align="center" style="padding:0;">
                    <br/>
                    <h1 style="color: #3600a1; font-size: 21px; font-weight: bolder; margin: 0;">
                        Thanks for taking our quiz! Here are your results.
                    </h1>
                    <br/>
                </td>
            </tr>

            <tr>
                <td style="padding:0;">
                    <br/>
                    <p style="text-align:start; color: #646466; font-size: 16px; margin: 0;">
                        Hello,
                    </p>
                    <br/>
                    <p style="text-align:start; color: #646466; font-size: 16px; margin: 0;">
                        Thank you for taking our quiz! We've compiled your results below:
                    </p>
                    <br/>
                </td>
            </tr>

            <tr>
                <td style="padding:0;">
                    <table style="width: 100%;">
                    <!-- Insert HTML template here -->
        </table>
    </div>
</body>
</html>

Under the appropriate section, insert the quiz data points from the JavaScript step. Start by typing “/” and select Html content under the Run JavaScript dropdown.

Step 5: Final Testing and Publish the Zap

Now that everything is set up, it’s time to test the entire workflow to ensure that the quiz results are sent correctly to Gmail.

1. Run a final test for the Gmail action. This should send a test email to the recipient specified in the To field, containing the formatted quiz results.

2. Check your Gmail inbox to ensure the email looks correct and includes all necessary information, such as product details and quiz answers.

3. If the test email looks good, click Publish to make the automation live.