.proca-widget, #signature-form {max-width:600px;min-width:300px} .row{ display: flex; flex-direction: row; flex-wrap: wrap; width:100%; } .col{ display: flex; flex-direction: column; flex-basis: 100%; padding:0 10px; flex:1; } pre {background:#dede; padding: 10px}

...

Are you working for this organisation?

Adding this widget on your website is simple!

We recommend that you run the widget on your website’s homepage. However, if you prefer, you can run it on a specific campaign or other relevant page. For the final version, it's better to have a memorable url, as it will hopefully be widely shared.

You simply need to copy paste in your website editor, for instance wordpress

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

You can put the first line wherever you want, the other lines has to be where you want the form to be displayed

Please do NOT test the widget on a live page – we don’t want people trying to sign before we go live!
In order to be compliant with the EU Regulation, you must put the title, text and "more" button, these are the elements with eci-title, eci-description and eci-more classes.
We recommend that you put them in two columns, and that's what the code above does – but it is ultimately up to you.
One block (composed of the eci-title, eci-description and eci-more classes) will be the official text of our ECI, which will be displayed in the language that you have chosen for your widget. Legally, this official text must be displayed alongside the signing part of the widget. You are free to use different layouts, for instance here we use "h3" for the title of the ECI, and you can put other elements for styling differently (in the example above, we put the eci text on a blue background), as long as all the 3 elements (title, text and "more" are displayed.
The other div with the class proca-widget can be empty, and will contain signing section, which first gives people an option to be kept updated on progress, secondly the ECI signing itself (this information is never seen by us or any campaign partners), and thirdly the opportunity to share.
you can see an example of the widget and the steps above.