October 7, 2024

StepContext: Optimise the content of your page

Our campaign widget offers a sophisticated approach to engaging supporters, focusing primarily on the action form while allowing you to manage all content through your regular Content Management System (CMS), such as WordPress. This separation of concerns ensures that you maintain full control over your messaging and design using a tool you know already.

The widget is designed to guide supporters through a customisable journey, typically comprising several steps. Whilst the specific journey can be tailored to your campaign’s unique needs, it generally follows a pattern of a main action, followed by an invitation to share the campaign on social media, and optionally, a request for a donation. This multi-step approach allows for a more nuanced and effective engagement strategy.

To maximise the impact of each step, we recommend adjusting the content on your website to align with the current stage of the supporter’s journey. For instance, during the main action step, you might focus on explaining the campaign’s context, the crisis at hand, the opportunity for change, and your theory of change. When transitioning to the sharing step, you could emphasise how sharing allows supporters to multiply their impact. Similarly, if you include a donation step, you might highlight the tangible outcomes that donations can achieve.

To make it easier for the campaigner, you write all the content for all the steps into your page and let the StepContext feature of our widget control which one to show or hide. It operates by utilising HTML class names to control the visibility of content blocks based on the current step. This means you have the flexibility to write all your content blocks in advance and use specific class names to instruct the widget when to show or hide each block. For your supporters, it means instant transitions between steps, that has been proven to increase engagement.

Adding these classes in WordPress’s Gutenberg editor is straightforward. We will be using our petition widget as an example but the process is virtually the same with a mail-to-target widget. Here’s how you can do it:

  1. Select the block you wish to control.
  2. In the block settings sidebar, locate the ‘Advanced’ section.
  3. Find the ‘Additional CSS Class(es)’ field.
  4. Enter the required classes, separated by spaces.

Each block that you want the widget to control needs two classes:

  1. proca-text“: This class indicates that the block is controlled by the widget.
  2. proca-[step]“: This class specifies which step the block corresponds to. For example, “proca-Petition” for the main action step, or “proca-Share” for the sharing step.

So, a complete class for a block might look like “proca-text proca-Petition” (displayed only on the Petition step) or “proca-text proca-Share” (only on the share step)

This system provides you with granular control over your content, allowing you to craft a supporter journey that is both engaging and effective. By strategically revealing content at each step, you can guide supporters through your campaign in a way that maximises their engagement and impact.

Structure for campaigns’ page

The structure of your campaign page is likely to be unique to your campaign and communication style, but we recommend to cover these main points

  1. Campaign title
  2. Petition text
    • short version of your demands (2 or 3 paragraphs), this is the only content that needs to be identical between all the partners
  3. Main Campaign Explanation:
    • Purpose: Explain the problem, highlight urgency, present the opportunity and introduce the theory of change.
    • This section sets the stage for the entire campaign, providing context and motivation for action.
  4. Sharing Encouragement:
    • Purpose: Focus on amplifying impact through social proof and network effects.
    • This section reinforces the theory of change by showing how individual actions contribute to the larger goal.
  5. Donation Appeal:
    • Purpose: Secure resources for sustaining and expanding the campaign.
    • This section connects donations to concrete actions, demonstrating the real-world impact of financial support.

These purpose statements help to:

  • Clarify the strategic intent behind each section of content
  • Ensure that each part of the campaign journey serves a specific function
  • Guide content creators in maintaining focus and consistency across the campaign

When adapting this structure to a real campaign, you would:

  1. Adjust the content to reflect your actual cause and goals
  2. Ensure each section fulfills its intended purpose within your campaign strategy
  3. Use the proca classes to control when each section is displayed during the supporter’s journey

Example campaign: Ban pineapple on pizza

To illustrate, let’s create a campaign to ban Hawaiian pizza!

1. Campaign title

This should be something not too technical, ideally something that will intrigue and encourage potential supporters to find out more. It’s usually the title of the page.

Join the Fight Against Culinary Chaos!

2. Campaign’s text: Main Campaign Explanation

Purpose: This section aims to explain the problem, highlight the urgency, and present the opportunity for change. It also introduces the theory of change by showing how collective action can influence decision-makers.

Next month, the United Nations World Food Programme is set to pass a groundbreaking resolution declaring “hawaiian pizzas” a crime of poor taste. This is our chance to make history and protect the sanctity of proper pizza!

However, the battle is not yet won. Several countries remain undecided on this crucial issue. That’s where you come in! We need to show massive support against that horrible topping to convince these wavering nations to vote for the ban.

Why Your Signature Matters:

  • Preserve Pizza Purity: Keep pizza free from tropical intrusions!
  • Protect Global Taste: Ensure future generations enjoy proper pizza combinations.
  • Unite Pizza Lovers: Join millions worldwide in this critical culinary cause.

Together, we can stop the abomination! Sign our petition now and be part of this cheesy revolution!

3. Campaign’s text: Sharing Encouragement

Purpose: This section focuses on amplifying impact through social proof and network effects. It explains how individual actions (sharing) can contribute to the larger goal, reinforcing the theory of change.

Spread the Word, Not the Pineapple!

Thank you for signing our petition! But don’t stop there – your voice can echo even louder!

By sharing this campaign with your friends and family, you can:

  • Amplify Our Message: Each share could bring in 3-5 new signatures!
  • Educate Others: Many people don’t realise the gravity of this pizza crisis.
  • Create a Domino Effect: Your share might inspire others to share too!

Remember, every share brings us one step closer to a world free from pineapple-topped pizzas. Be a pizza hero – share now!

4. Campaign’s text: Donation Appeal

Purpose: This section aims to secure resources for sustaining and expanding the campaign. It connects donations to concrete actions, demonstrating how financial support translates into real-world impact and advances the campaign’s goals.

Fuel the Fight Against Fruity Toppings!

Your signature and shares are incredibly valuable, but we need more ammunition to win this battle. Consider making a donation to supercharge our campaign!

Your Donation Will Help Us:

  • Lobby Decision Makers: We’ll send miniature pineapple-free pizzas to UN delegates!
  • Spread Awareness: Fund our cheesy ad campaign across social media platforms.
  • Support Pizza Purists: Provide counselling for those traumatised by unexpected pineapple encounters.

Every pound counts in this crusade for culinary correctness. Donate now and help us slice through the opposition!