Use Riddle as entrypoint

Redirect your customer based on a poll choice. You can use this for docs websites or online shops. All you need is a short JS code and an optional redirect result block in your Riddle as fallback if the JS did not work as expected.

Open the example page in your browser: Link

JS code

Redirect the browser window by checking the submitted answer.

function eventListener(event) {
    if (!event.data.isRiddle2Event) {
        return;
    }

    const data = event.data;

    if (data.action === "Block_Submit") {
        switch (data.answer) {
            case "Webhook":
                redirectWithTimeout("/examples/webhook/webhook-reciever", 300);
                break;

            case "Embed":
                redirectWithTimeout("/examples/embed-code/embed-code-example", 300);
                break;

            case "JS Events":
                redirectWithTimeout("/examples/js-events/event-logger", 300);
                break;

            case "PDF Certificate":
                redirectWithTimeout("/examples/pdf-certificate/pdf-certificate", 300);
                break;

            case "Data Layer":
                redirectWithTimeout("/examples/data-layer/push-website-data-into-a-riddle", 300);
                break;

            default:
                console.log("Unknown block submitted");
        }
    }
}

Complete code

<!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>
        .riddle-event-logger {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem;
            padding: 1rem;
        }

        .riddle-id-input {
            display: flex;
            gap: 1rem;
            align-items: center;
            margin-bottom: 1rem;
        }

        .riddle-id-input input {
            padding: 0.5rem;
            font-size: 1rem;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 0.25rem;
            padding: 1rem;
        }

        .riddle-id-input button {
            padding: 0.5rem 1rem;
            font-size: 1rem;
            background: rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 0.25rem;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="riddle-id-input">
        <strong>Riddle ID</strong>
        <input type="text" id="riddleIdInput" placeholder="Riddle ID">
        <button onclick="loadRiddle()">Load Riddle</button>
    </div>

    <div class="riddle-event-logger">
        <div>
            <strong>Riddle</strong>

            <div class="riddle2-wrapper" data-rid-id="MxAVsXr1" data-auto-scroll="false"
                data-is-fixed-height-enabled="false" data-bg="#fff" data-fg="#00205b"
                style="margin:0 auto; max-width:100%; width:100%;">

                <script src="https://www.riddle.com/embed/build-embedjs/embedV2.js"></script>

                <iframe src="https://www.riddle.com/embed/a/MxAVsXr1?lazyImages=false&staticHeight=false"
                    allow="autoplay" referrerpolicy="strict-origin"></iframe>
            </div>
        </div>
    </div>

    <script>
        const preElement = document.getElementById("preElement");
        const riddleIdInput = document.getElementById("riddleIdInput");
        let riddleId = "MxAVsXr1";

        function loadRiddle() {
            riddleId = riddleIdInput.value;

            const riddleEmbed = document.querySelector(".riddle2-wrapper");
            riddleEmbed.setAttribute("data-rid-id", riddleId);

            // Set iframe source.
            const iframe = riddleEmbed.querySelector("iframe");
            iframe.src = `https://www.riddle.com/embed/a/${riddleId}?lazyImages=false&staticHeight=false`;
        }

        function redirectWithTimeout(url, timeout) {
            setTimeout(() => {
                window.location.href = url;
            }, timeout);
        }

        function eventListener(event) {
            if (!event.data.isRiddle2Event) {
                return;
            }

            const data = event.data;

            if (data.action === "Block_Submit") {
                switch (data.answer) {
                    case "Webhook":
                        redirectWithTimeout("/examples/webhook/webhook-reciever", 300);
                        break;

                    case "Embed":
                        redirectWithTimeout("/examples/embed-code/embed-code-example", 300);
                        break;

                    case "JS Events":
                        redirectWithTimeout("/examples/js-events/event-logger", 300);
                        break;

                    case "PDF Certificate":
                        redirectWithTimeout("/examples/pdf-certificate/pdf-certificate", 300);
                        break;

                    case "Data Layer":
                        redirectWithTimeout("/examples/data-layer/push-website-data-into-a-riddle", 300);
                        break;

                    default:
                        console.log("Unknown block submitted");
                }
            }
        }

        window.addEventListener('message', eventListener);
    </script>
</body>

</html>