Modifying your campaign programatically

Raisely stores most of your fundraising campaign settings in a large JSON object called the config object. Every campaign has a config object, you can view it by opening your Raisely campaign and heading to your console in Developer Tools, then type: campaign.config.

The campaign contains a few settings used on your Raisely page, and you can modify it in JavaScript to make changes to your campaign programatically. This might be helpful if you want to:

• Dynamically modify custom fields
• Run an A/B test on donation amounts
• Dynamically change donation amounts or frequencies

📘

You can't change everything!

We use the campaign config in a few ways, and while you can change whatever you like programatically it won't always update the page. For example, styles are compiled before the page is loaded and changing your primary colour won't have any impact.

To modify your campaign config, you can use the window.setCampaignConfig() function that Raisely exposes.

Set the key to the config key in dot notation (ie. "customFields.user") and the value to the value you'd like to modify that key to.

window.setCampaignConfig(key, value);

Let's say we want to update the donation amounts on our donation form, we could run the following code:

window.setCampaignConfig('amounts', [
  {
    "interval": "ONCE",
    "count": 1,
    "amounts": [
      {
        "amount": 3500,
        "title": "",
        "image": ""
      },
      {
        "amount": 5500,
        "title": "",
        "image": ""
      },
      {
        "amount": 10500,
        "title": "",
        "image": ""
      },
    ]
})

This will instantly update the donation amount buttons for all donation forms on your campaign.

Use Case: Dynamically change donation amounts based on the URL

Let's say you want to give each of your donors a personalised array of three gift amounts to choose from, and you send these amounts up in the URL as query parameters using your email program. You could add the following code in your Raisely Custom JavaScript settings:

function parseQuery(queryString) {
    var query = {};
    var pairs = (queryString[0] === '?' ? queryString.substr(1) : queryString).split('&');
    for (var i = 0; i < pairs.length; i++) {
        var pair = pairs[i].split('=');
        query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
    }
    return query;
}

// assume you have a value like ?button1=300&button2=600&button3=900
const myVars = parseQuery(window.location.search);
window.setCampaignConfig('amounts', [
  {
    "interval": "ONCE",
    "count": 1,
    "amounts": [
      {
        "amount": myVars.button1 ? myVars.button1 * 100 : 3000, // always good to set a default
        "title": "",
        "image": ""
      },
      {
        "amount": myVars.button2 ? myVars.button2 * 100 : 5000,
        "title": "",
        "image": ""
      },
      {
        "amount": myVars.button3 ? myVars.button3 * 100 : 8000,
        "title": "",
        "image": ""
      },
    ]
}])