How do I use variables within the Custom HTML tag?

When you define the content of a Custom HTML, you can access the content of any variable within the container through curly brackets. You can assign the variables to a JavaScript variable, to a CSS style, and use it within HTML:

<script>
    // correct
    var myVariable = {{PageUrl}};
    var screenWidth = {{ScreenWidth}};
    var pageWidth = myVariable + screenWidth;

    // not correct (do not put quotes around it)
    var myVariable = '{{PageUrl}}';
    // not correct (do not put two variables next to each other)
    var pageWidth = {{PageUrl}}{{ScreenWidth}};
</script>

<style>
    // correct (can only be used as a value)
    body {
        width: {{ScreenWidth}};
    }

    // not correct
    body {
        {{myVar}}: 15px;
    }
</style>

<div>{{PageUrl}} <a href="{{PageUrl}}">Click Me</a></div>

Not sure about the name of a variable? Simply click on the icon next to the text field and a variable selector will open and automatically insert the needed placeholder for the variable.

What is the CSS style value “mTmKpwoqM”?

If you assign a variable as part of a CSS style, the resulted value may be “mTmKpwoqM” if the variable has not returned any value. For example you may notice a body{ color: mTmKpwoqM; }. This value was chosen to keep your CSS syntax “valid” (and to make this FAQ article easier to find).