Customising Widgets

Language or Colour

The Widget’s language and colour can be changed on the dashboard:

  • Click on the Settings cog next to the name of the widget you want (and if you have multiple, such as for multiple languages, make sure it’s the right one!).
  • You will then see you have the option to change language from a drop-down list or to change the colour. After you do this, click ‘Save’.
  • After saving, you must Rebuild the Widget. It does not automatically regenerate. Click the rocket Launch icon, then click the Rebuild button and wait a couple of minutes. Your widget will now be rebuilt.

As shown here:

Note: Cache Issue. It will usually be experienced that when you view the webpage, it will still show the old version. This will be because it has been stored in your ‘cache’, which means that your browser has saved some things it downloaded to save it having to download them again, and you are being shown the old version from your cache. Either clear your cache or open the webpage in a different browser (incognito/private mode may work) or device, and you will see your new widget again. You can also click the ‘Preview’ button to be taken to a page on our server which also shows the widget and might not already be in your cache. The Demonstration on the dashboard will also be cached and show the old version for the same reason.

Customising Text

Changing text in the widget is done using html tags on the webpage you are displaying the widget on. Copy and paste the code for the things you want to change: the name of the class is in quotes (eg “proca-text share_title”) and the text that will be displaced is in between the tags (eg >The Title</p>). This overwrites what is in the widget on our server which is being fetched using the widget source code.

Note: sometimes customising in this manner is not possible if something has been set to override in the widget config at campaign level.


The html code for a widget plus some text customisations will look something like:

HTML Tags:

Adding a comment block of text to the webpage to sit with the widget:

<p class=“proca-text comment”>
This allows a block of text used to pre-fill the comment.

Changing the consent opt-in:

<p class="proca-text consent_opt-in">Yes, I would like to... </p>

Changing the consent opt-out:

  <p class="proca-text consent_opt-out">No thanks, I would not like to... </p> 

Changing the button text:

<p class="proca-text button sign-now">Text for the Button!</p>

Pre-filling a field is possible too. Here is how to pre-fill a comment:

<p class=“proca-text comment”>
Write your pre-filled text inbetween these two tags!

Note: on the No to GMOs campaign, in response to the Commission’s blocked of duplicate messages, a ‘Snowflake Engine’ has been used to generate block-combined messages. This overrides any pre-fill you have set, unless this has been disabled for you. If you would like it to be disabled, please contact us.

The Share Step

The share step occurs (on most widgets, if it is part of the widget!) after someone has taken the action to thank them and prompt them to share the campaign.

You can view the Share step (so that you can view it without having to submit!) by adding the following to the end of the URL: ?proca_go=Share . So for example, to see the Share step of the Example Widget on our website, you can go to:

Share Step Text

Most widgets on their share step have some text which shows up for the supporter. This can be customised using:

<p class="proca-text share_title">The Title of the Share.</p> 
<p class="proca-text share_intro">The Intro of the Share.</p>

Social Share Messages

You can customise the share text that appears for the social media share step by adding the below tags:

<p class="proca-text share">Join me in supporting this campaign.</p>
<p class="proca-text share-twitter">I've just signed this campaign - it's important and you should too!</p>
<p class="proca-text share-whatsapp">Hi, I've just signed this campaign and thought you might also be interested in signing it - here's the link.</p>

The “proca-text share” is what will show up in the link preview, such as on Twitter or Facebook. You may want to write it from your organisation’s perspective – for example, Join our campaign to make something better! – or from the supporter’s perspective.

The “proca-text share-twitter” is a pre-fill draft Tweet which shows up if someone clicks the button to share on Twitter. Similarly, the “proca-text share-whatsapp” is a pre-fill draft WhatsApp message for someone who clicks the button to share on whatsapp.