This article details how to install Pico onto a Webflow website.

⚠️ NOTE: Installing Pico onto a Webflow website will require a Webflow hosting plan.

Initial Setup

Before getting started, please make sure that you have a Primary URL saved in your account's Publication settings at Settings ► Account. If you have a Staging URL and/or Development URL, you will need to save those as well in order for Pico to successfully load on those versions of your site.

⚠️ NOTE: The installation method below requires development knowledge and the ability to manage the code on your side. This should be for advanced users only. Please contact Pico support if you need assistance or would like a recommendation for a Pico Developer Partner.

Step 1 - Install the Widget Snippet

To install Pico you will need to navigate to the page that you would like Pico to appear on, you can do this for multiple pages. Open Webflow and select the pages editor on the left hand side. From there select the page you are working on and open the settings for that page.

In the settings for the page, you will need to navigate to the Custom Code section. Within here you will need to insert the Pico Plugin code in the "Inside <head> tag" section of the custom code.

⚠️ NOTE: Replace INSERT YOUR PUBLISHER ID in the snippet with your Pico Publisher ID, which you can find under the Website section of the Integrations settings at Do not remove the quotation marks surrounding the Publisher ID.

<script> (function(p,i,c,o){var n=new Event("pico-init");i[p]=i[p]||function(){(i[p].queue=i[p].queue||[]).push(arguments)},i.document.addEventListener("pico-init",function(e){var t=i.Pico.getInstance(e,{publisherId:o,picoInit:n},i);t.handleQueueItems(i[p].queue),i[p]=function(){return t.handleQueueItems([arguments])}},!1);var e=i.document.createElement("script"),t=i.document.getElementsByTagName("script")[0];e.async=1,e.src=c,e.onload=function(e){return i.Pico.getInstance(e,{publisherId:o,picoInit:n},i)},t.parentNode.insertBefore(e,t)})("pico",window,"", "INSERT_YOUR_PUBLISHER_ID"); </script>

For more information on installing the required JavaScript in general, review our Pico Installation guide.

Step 2 - Install the Page Properties Snippet

Staying in the page properties that you are on, you will want to scroll down to the "Before </body> tag" section. This will be where we want to insert the Page Properties Snippet. For the Snippet, please refer to the Pico Installation guide for the full list of properties as well as a filled in example of the code.

⚠️NOTE: Shown below is the example code. You will want to update this per your page specific properties.

var pageInfo = {
article: true,
post_id: 1337,
post_type: "page",
taxonomies: { tags: ["example"], categories: ["example-pages"]},
url: window.location.href
window.pico('visit', pageInfo);

Step 3 - Setting Up a Registration Wall

To set up the registration wall, you will first need to make sure that you have a registration rule set up within your Pico account. You can learn more about how to do so from our article on registration rules.

From there, for our example, we created a section on Webflow that contains a Div block. On this Div block you will want to set the ID to be "pico". This lets our plugin know that this is the content that should be modified based on the registration rules set within your Pico account.

For this example we have created an article out of some dummy text. To be able to see Pico in action you will want the Div tag to contain a few other elements such as a header and a few paragraphs so that it can show or hide that information.

Once you have set that Div ID to "pico" and you have content within your Div tag, you should be ready to publish your Webflow page and see Pico in action.

For our page, when someone is not registered, the content is automatically locked due to our rules.

When a member registers this is the view that the member sees:

For more control over the content and how it is displayed you can utilize CSS & our Pico Signals. Using Signals, you can identify the current status of a user and show or hide content based off of those instead of having it automated. Please refer to our article on signals for more information.

Our example page for this installation and registration wall can be seen here:

Did this answer your question?