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, click on the Widget tab on the navigation bar on the left. This will bring up a list of widgets you have available.

Click on the ‘Embed’ button (red box!).

This will bring out the ‘Preview and Embed’ sidebar. The Embed code is there for you to copy (either use a keyboard shortcut (such as ctrl+c) or right-click and select ‘copy’).

The code segment begins with the first ‘<script …’ and ends with the final ‘</script>’.

This is 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!

Widget plus Text Column

If you would like to embed the Widget plus a column of text, which will show up automatically next to the form, then you can do this using an additional bit of HTML code: 

<div class="proca-widget">
Put the custom text here!
</div>

If there is campaign text built into it, ie petition text which has been made as part of the campaign widgets, then you can just copy the proca-description tag to add this. This will fetch the campaign petition and fill it in for you automatically.

<div class="proca-widget">
  <div class="proca-description"></div>
</div>

This means you will have a two column display, with the text on the left and the widget on the right.

Embedding an ECI Widget on your Website

For an ECI, as well as adding the Proca widget, EC Regulations also require the title and text of the ECI and the ‘Read more’ button. If this is not done, there will be an invalidity issue: people must know what they are supporting using the agreed text. So, there are three components:

  • the form “normal” widget
  • the text of the ECI
  • the “read more” button

The steps are similar to above, with some extra lines of code to insert to add the other components. Here are two ways to get the whole code:

You can copy the code below, adding your widget code from the Dashboard. The first line is from the dashboard (as above), the other lines add the ECI components.

<script id="proca" src="https://widget.proca.app/d/addyourwidgetcodehere"></script>
<div class="proca-widget">
</div>
<h3 class="eci-title">...</h3>
<div class="eci-description"></div>
<div class="eci-more"></div>

Or, you can find all of the lines of code on the widget page on our server, found by the preview button as in the below steps:

Head to the “Widgets” Tab and click on the “Embed” button next to the widget you want to embed.

Then you will see a view like the picture to the left. Click on the “Preview” button.

This will take you to a webpage on our server which has the widget embedded.

Click the ‘?’ button which is in the top-right of the screen. (If you can’t see it, zoom out on your browser, it may have ended up hidden.)

This will bring up some code which needs copying (this image shows it already highlighted).

Copy and paste that code into your website editor, and that will place the widget and other components on the webpage.

Note: you do not need to change the “…” in ECI title, the title is added automatically.

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 would be: https://proca.app/example-widget/?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:

Guide Navigation