Putting a Widget on your Website

This section is about how to embed a Proca widget on a website.

Proca widgets use HTML code to be placed on your website. On WordPress, this means that you need to insert a Custom HTML block. This code does a little bit of code magic by telling your website editor to put the Proca widget from our server on that webpage.

Copying the Widget Code

You can get the code from the Proca Dashboard, or in some situations, someone involved in the campaign may send it to you directly.

On the dashboard, navigate to the main Widget tab. Or, if you know your widget’s ID number, you can access it directly at: https://we.fixthestatusquo.org/widget/ID/embed. (The URL for the example widget is https://we.fixthestatusquo.org/widget/42/embed). Click on the list item “Embed code” on the right.

The embed dialog will open. Click on the ‘Copy’ button to copy your embed code to the clipboard. For our example, the embed code is <script src="https://widget.proca.app/d/do-not-panic/42" async></script>

If you did everything right, you we’ll be prompted with this screen.

You got the HTML code which you can place on your website anywhere you wish — that is all you need to do!

Custom HTML on a Website Builder

If you are using a CMS like WordPress, then you have to make sure that you are inserting the HTML code to be treated as code, as website builders will typically interpret what you give them as text to display instead. This guide will use the example of WordPress, but it will be a similar process for most others, and you should be able to find a guide online by searching ‘how to insert custom HTML into xxx’ in your preferred search engine.

The below video shows how it works on WordPress, using a ‘Custom HTML’ block to read it as HTML. As you’ll see, it takes less than a minute to do!

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, you can switch to it in Dashboard.

Don’t forget to hit “Save” after toggling!

This option puts the widget in permanent test mode and needs to be switched off before using it in real campaign.

If you wish to test the widget during the campaign, or just for short time, you can add ‘ ?proca_test ‘ to the end of the URL to tell the widget to be in test mode. For our example widget, it would be https://widget.proca.app/d/do-not-panic/42/index.html?proca_test.

When you are viewing the widget in test mode, there will be a pop-up at the top of the page to confirm it like this:

Direct Access to Steps

Your widget typically consists of several steps. If you want to test a specific step, you don’t need to complete the entire process or sign the petition—you can access it directly! Simply add the appropriate fragment identifier to the end of the page URL.

Here are the steps along with their respective fragment identifiers:

  • Petition: #proca_Petition
  • MTT (mail-to-target): #proca_Email
  • Share: #proca_Share
  • Donation: #proca_donate_Amount

Guide Navigation