Change Palette via Data Layer

In this example, you will learn how to change the palette of your Riddle via Data Layer. This is useful if you have a dark and light mode on your website or when you use your Riddle on multiple websites with different styling.

Step 1

Go to Publish settings "Data Layer" and enable the option "Change palette via data layer".

Step 2

You can push the ID (name*) of the palette you want to apply via Data Layer into the Riddle.

You can use this JavaScript code on your website to change the Palette via code.

// palette name/id. e.g. default:dark
const sendPaletteChange = (palette) => {
    window.riddleDataLayer.push({
        key: "r_p",
        value: palette
    });
}

sendPaletteChange("default:dark");