Skip to main content

Building a Campaign with Custom Code

This article will take you through how to build campaigns with custom code

Charley Bader avatar
Written by Charley Bader
Updated over 3 weeks ago

First, set up your campaign based on whether you are building a Standard, Dynamic or Sequenced campaign.

When it comes to creating each experience, or the Master Template for Dynamic Content, select 'Add Content', and then 'Custom Code'. This will open a code editor for you to begin creation.

HTML, CSS and JS code can define params that in turn show as variables in the variables pane.

Param fields allow us to personalise content, styling, and behaviour in real time.

HTML: Dynamic Content Blocks

Use the {{params}} tag to insert editable, contextual content inside your HTML blocks.

htmlCopyEdit<div class="usp-banner"> {{params field="Main Title" category="Content" default="Free delivery on all orders"}} </div>

This:

  • Creates a variable in the variables pane called Main Title

  • Renders the value of Main Title (if set in the Experience Editor variables pane)

    • Falls back to rendering "Free delivery on all orders" if nothing is set in the variables pane

  • Groups the param under a "Content" category in the variables pane for tidy editing

CSS: Styling with Editable Params

Use params in the CSS section to control styles like colours, padding, etc. To expose a colour picker, add type="color".

cssCopyEdit.usp-banner { position: fixed; bottom: 20px; left: 20px; padding: 12px 24px; background: {{params field="BackgroundColor" category="Styling" default="#F5F5F5" type="color"}}; color: {{params field="TextColor" category="Styling" default="#000000" type="color"}}; }

The Experience Editor will render a colour picker for these fields under the “Styling” category.

JavaScript: Behavioural Logic

You can also use {{params}} in JavaScript strings to control values like offsets, delays, or custom logic.

jsCopyEditvar scrollOffset = `{{params field="offset" category="JS" default="200"}}`;

This will pull in the value of offset from the Experience Editor as a string. Great for scroll thresholds, animation timing, or other custom behaviours.

Param Syntax Reference

Attribute

Description

field

Required. The unique name of the parameter (e.g. "mainTitle")

category

Optional. Groups fields inside the Experience Editor (e.g. "Styling", "Content", "JS")

default

Optional. A fallback value shown if nothing is set manually

type

Optional. Used to render editor controls like type="color" for colour pickers or type="enum" for selects

enum

When type is set to enum, an array of options to show in the dropdown. E.g.

{{params field="width"
enum=[
  { value: "80vw", label: "Large" },
  { value: "60vw", label: "Medium" },
  { value: "40vw", label: "Small" }
]
}}

Tips & Best Practices

  • Use clear, human-readable names – These show up in the Editor

  • Set sensible defaults – They prevent layout issues or broken styles

  • Use categories – Keep your Experience Editor organised and manageable

  • Don’t wrap params in <style> tags – Use the CSS section instead

Quick Examples

Headline:

htmlCopyEdit<h2>{{params field="headline" category="Copy" default="Get ready for summer"}}</h2>

CTA Button:

htmlCopyEdit<a class="cta-button">{{params field="buttonText" category="Copy" default="Shop Now"}}</a>

Button Colour (CSS):

cssCopyEdit.cta-button { background-color: {{params field="ctaBgColor" category="Styling" default="#FF6600" type="color"}}; }

Offset Control (JS):

jsCopyEditvar offset = `{{params field="ctaOffset" category="JS" default="150"}}`;

Once you have completed your build, click 'Save' and you will be taken back to the set-up page. You can now follow the instructions as per the type of campaign you are building

Did this answer your question?