Allows web-editors adding a global counter to campaign pages so that they can show in Real Time how many signatures are collected worldwide.

📚 Create Content > Blocks > Counter

Definition & Purpose

Use the Counter block to display real time* signatures being collected worldwide on petitions.

This block creates a sense of urgency and community involvement by showcasing the increasing number of signatures, encouraging others to participate in the cause.

Add the block to your page

All the options for editing a block are on the right side of the page, in the Block section. There are 3 categories:

Once you add the block, you can add the title and the description in place:

Styles and context

👀 What is an API URL ? An API URL is the link to locate the source. Instead of sending you to a website, the URL will go to an application server, which will send back an API response. In short, for this example on the Counter Block: it’s the link to fetch the data from Engaging Networks (or Hubspot, or any other source) to display the current number in the Block.

Examples of styles

Hi, I am a text only style 🙂

Hi, I am a description


Hi, I am a Progress bar style 🙂

Hi, I am a description


Hi, I am a Progress dial style 🙂

Hi, I am a description

KEY INFO – The “Progress bar inside EN form” style can only be used in conjunction with the Block: Form (Engaging Networks) – Form on the Side style

Once inserted and customised your Block: Form (Engaging Networks) – Form on the Side style just ad the block: counter anywhere on the page, and it will be added to your form automatically.

Design Elements

All design files of the block are available in the P4 Design Systems > Blocks > Counter

Links & Resources

Handbook

Create Posts
Set up the P4 key Content (Navigation, Footer, Menus, Favicon, Post types)Main Navigation
Images & Videos 
Blocks & Patterns