.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}

Campaign <%= campaign %>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

I want to receive the newsletter from {{name}}

Do it now!

Hi, sign that!

How to embed this into your website?

You simply need to copy paste in your website editor, for instance wordpress. The specific instructions depends of your website, check with your webmaster or search how to add "raw html" + your CMS.

Just the action tool

This is the most flexible solution, you can have a full width form, or manage your layout exactly the way your want.
<script id="proca" src="https://%widget_path%"></script>
<div class="proca-widget">
</div>
<p class="proca-text share">I signed <%= campaign %>, you should sign too!</p>
<p class="proca-text share-twitter">I signed #<%=campaign %>, you should too!</p>
<p class="proca-text twitter_actionText">I signed #<%=campaign %>, you should too!</p>
<p class="proca-text email_subject">I signed #<%=campaign %>, you should too!</p>
<p class="proca-text email_body">I signed #<%=campaign %>, you should too!</p>
          

Action tool and campaign text (two columns)

If you want a little help and have something in two columns (like the example above), it's almost the same, but you put the text you want on the left hand column as the content of the widget
<script id="proca" src="https://%widget_path%"></script>
<div class="proca-widget">
<div class="proca-description"></div>
  Put here the title and text of the campaign
</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!
you can see an example of the widget and the steps above.