Skip to main content
All CollectionsBuilding Experiences with IntentCampaign Manager
Building a Campaign with Custom Code

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 a week ago

Setting up your Campaign

You are able to begin campaign creation from either the Campaign Manager, by selecting 'Create Campaign'. Or directly from the segment you wish to target, by selecting 'Add Campaign'.

The first step is to name your campaign, and add the URL of the page you would like to preview the campaign on. This will be your websites URL by default, but can be edited to be the specific page you require (for example, if you're building an experience to fire on a specific page, like a product page).

After completing this, select 'Continue' which will take you through to your experience.

Setting up your Experience

Within the Experience set-up, name the experience, and add the segment you would like to target. (If you have set-up the campaign directly from a segment, this will be pre-filled).

Then select 'Add Content', and 'Experience Templates'.

Now select 'Custom Template'. You will then be able to build a custom experience using HTML, CSS and JS.

Custom Templates

Custom Templating for Experiences

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 will then need to select the frequency of the experience, whether it should fire once per page, session or journey.

After you have selected this, click 'Continue'. If you are firing the campaign as an experience, with no control group, you can then move onto the Global Rules set-up. If you wish to test it as an experiment, read more below about setting this up.

Creating an Experiment

Once you have set-up your experience template, navigate back to the Campaign Set-Up tab.

Here, under Experiences toggle on 'A/B Test'. This will create a control.

From here, you can customise the traffic split. By default, when you create an A/B Test, it will be 50/50.

Setting up Global Rules

Global Rules apply to all variants within your campaign.

Within this area, you can define;

  • Page Targeting; which pages your campaign will fire on, either by including pages, or excluding them. By default campaigns will fire across all pages

  • Device Targeting; which devices the campaign should fire on (All, Desktop or Mobile)

  • Schedule; whether the campaign should start running immediately, or from a specific date and time

  • Campaign Management; by default, all campaigns are set to only display one campaign per page, based on first segment match. This is to ensure there are no conflicting campaigns. However, this can be disabled by checking the box within this section. Note; experiences within campaigns will fire based on first match, and it is not possible to override this.

Once completed, select 'Continue'.

Advanced Settings

If required, we also allow you to add global JavaScript within the experience to add custom triggers.

Adding an Additional Variant / Experience

You are able to add additional variants, or experiences, within a campaign, on the Campaign Set-Up page

Additional Variants

You may use this if you have set-up an A/B test and want to test;

  • Different content, to the same segment

  • The same content, to different segments

  • Different content, to different segments

To add an additional variant, once you have toggled on 'A/B Test', select 'Add Variation', and follow the same process.

Additional Experiences

You may wish to add additional experiences in order to serve different content to different segments of users. For example, you may have a discount code experience for those who are Struggling which is different than those who are Abandoning

A visitor will only see one experience from the same campaign. This is determined by the first experience they match. If they match multiple experiences at the same time, the experience they see will be chosen at random.

To add an additional experience, select 'Add Additional Experience', and follow the same process.

Previewing a Campaign

To preview a campaign, go to the Campaign Manager, and find the campaign you wish to preview.

Then select the eye icon. If there are multiple experiences, or experiment variants, you will need to choose which you would like to preview.

The preview will then load onto the URL you specified in the campaign set-up.

Please note; the previews will follow trigger settings. For example, if it is set to fire once per session. In order to get the preview to fire again, you will need to be in a new session (which can be achieved by using incognito mode, or clearing cookies)

Saving & Setting a Campaign Live

As you build your campaign, you are able to save your progress at any time by clicking 'Save Campaign' in the top right of the editor.

Once you are ready to set your campaign live, select 'Start Campaign'. If your campaign is scheduled to start immediately it will begin to fire. It it is scheduled for a specific date and time, it will begin to fire from then.

Did this answer your question?