Push website data into a Riddle

Please log in with a random username and password. We will pass the username to a Riddle on the next page and prefill a form field with it. Any username or password will work. This is a fake login screen simulation to showcase the use of the Riddle data layer.

The login form

<form action="urltowebsite/datalayer-riddle.php" method="post">
    <div class="form-group">
        <label for="username">Username:</label>
        <input type="text" name="username" id="username" class="form-control" required>
    </div>
    <div class="form-group">
        <label for="password">Password:</label>
        <input type="password" name="password" id="password" class="form-control" required>
    </div>
    <input type="submit" value="Login" class="btn btn-primary">
</form>

Source code on this page

This page contains the embed code for a Riddle and also two other pieces of code. In the header section, PHP is used to capture the POST data from the previous page and store the username in a variable. In the body section the variable is pushed to the Riddle data layer via PHP. It is important to create a Data Layer variable in the Riddle that has he same name as the key in the JS code below - in this case "username". To learn more about creating data layer variables in a Riddle please visit our data layer help guide.

Place this code in the head section of your website

<?php
// Get the username from the POST request.
$username = isset($_POST['username']) ? $_POST['username'] : 'Guest';
?>

Place this code on the body of your page, ideally below the Riddle embed code

<script>
    window.riddleDataLayer = [];
    window.riddleDataLayer.push({
        key: "username",
        value: "<?php echo htmlspecialchars($username, ENT_QUOTES, 'UTF-8'); ?>"
    });
</script>

Complete code

<?php
// Get the username from the POST request.
$username = isset($_POST['username']) ? $_POST['username'] : 'Guest';
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Riddle Event Logger</title>

    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        h1 {
            color: #fff;
            padding: 10px;
            text-align: center;
        }

        h2 {
            text-align: center;
        }

        p {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>Riddle with Data Layer Variables</h1>
    <h2>Hi <?php echo htmlspecialchars($username); ?>, welcome to our site</h2>
    <p>The Riddle below will use the username from the previous login form to pre-populate a Riddle form and it will also be used as a variable to personally greet the user when taking the quiz. <br>If you came to this page without previously filling out the login form, please go <a href="/examples/data-layer/push-website-data-into-a-riddle">back to this page </a>first. </p>
    <div class="riddle2-wrapper" data-rid-id="BXRKKnYI" data-auto-scroll="true" data-auto-scroll-offset="80" data-bg="#fff" data-fg="#00205b" style="margin:0 auto;
                max-width:100%;
                width:640px;">
        <script src="https://www.riddle.com/embed/build-embedjs/embedV2.js"></script>
        <iframe src="https://www.riddle.com/embed/a/BXRKKnYI?lazyImages=true" allow="autoplay">

        </iframe>
    </div>

    <script>
        window.riddleDataLayer = [];
        window.riddleDataLayer.push({
            key: "username",
            value: "<?php echo htmlspecialchars($username, ENT_QUOTES, 'UTF-8'); ?>"
        });
    </script>
</body>

</html>