This section is about how to embed a Proca widget.
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
Once you have inserted the block, it is ready to put the Proca widget code into, using copy and paste functions. You can get the code from the Proca Dashboard, or 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, select the widget and click ‘Preview’. Then, highlight the text and copy it, either using a keyboard shortcut (such as ctrl+c) or right-click and select ‘copy’.
On the right hand panel, you have the code to use to put the widget on your site
If you know how to use html code on a website, then away you go!
Custom HTML on a Website Builder
If you are using a website builder, then you will have to insert the html code using that. 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.
WordPress usually takes your text and turns it into html. But because we are trying to insert html, WordPress needs to be told to treat it as code instead of text. So, you have to add a Block that will read it as code.
Click the Plus button to add a new block, type ‘html’ into the search, and click on the button for ‘Custom HTML’ to add that block, as in this series of images:
Paste and Update
Copy the code (as in above section) and paste it into the block.
With that code pasted, you can now save/update/launch the webpage and the Proca widget will be there:
And that’s it!
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 .