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 this week

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.

Use param fields 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="mainTitle" category="Content" default="Free delivery on all orders"}} </div>

This:

  • Renders the value of mainTitle (if set in the Experience Editor)

  • Falls back to "Free delivery on all orders" if nothing is set

  • Groups the param under a "Content" category 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?