Customising Widgets

This guide page is about customising campaign widgets on Proca.

Language or Colour

The Widget’s language and colour can be changed on the dashboard: https://account.fixthestatusquo.org/widget.

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. The Demonstration on the dashboard will also be cached and show the old version for the same reason. More about how to bypass the cache issue here.

Customising Widget Text

Changing text for one particular 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.

If you are instead looking to change the text for a whole campaign, check out the section on Campaign Text and Translations.

Note: sometimes customising in this manner is not possible depending on the settings at the campaign level. If you think something should be changeable, let us know.

Example:

Here is an example of what the html code for a widget plus some text customisations will look 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.
</p>

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 consent intro text:

<p class="proca-text consent_intro">Would you like to change the world? Our newsletter will go a small step towards that.</p>

Changing the button text:

<p class="proca-text register">Register Button Text!</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!
</p>

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.

Test Mode

If you wish to view your widget in test mode, so that you can fill it out and click through without it mattering, then you can add ‘ ?proca_test ‘ to the end of the URL to tell the widget to be in test mode. For example, our Example Widget at https://proca.app/example-widget/ would be: https://proca.app/example-widget/?proca_test .

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: https://proca.app/example-widget/?proca_go=Share. (note: this is case sensitive, Share.)

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.

Pre-Filling Fields

If you wish to pre-fill some fields, you can add parameter(s) at the end of the URL. For example, if you add the parameter “proca_firstname=Jane” it will pre-fill the firstname field with the content “Jane”.

For example: https://widget.proca.app/d/do-not-panic.partner/Examplecampaigningorganisation/index.html?proca_firstname=Jane&proca_lastname=Doe

Guide Navigation

Back to Contents Page