Skip to content

Custom Experiences

Scott Garner edited this page Feb 21, 2019 · 6 revisions

It is possible to create your own custom experiences using the data provided by Heat. Below is a minimal example in javascript.

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

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Heat Hello World</title>


        <!--First, make sure is available to your project.-->
        <script src=""></script>


            // Next, create a connection to
            const socket = io('wss://');

            // Once connected, join a Twitch channel with your numeric channel id.
            socket.on('connect', () => {
                socket.emit("channel", 97032862);

            // Now, listen for click events.
            socket.on('click', (data) => {
                const clickData = JSON.parse(data);

                // Finally, use the click coordinates to create your experience.
                console.log(clickData.x, clickData.y);




The click data payload is outlined below.

    id: "U97032862",    // Opaque User ID for viewer.
    x: "0.354",         // Normalized X coordinate.
    y: "0.736"          // Normalized Y coordinate.
Clone this wiki locally
You can’t perform that action at this time.