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");