Skip to main content

Installing Pico on Your Webflow Website

  • Updated

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

 

An example Webflow project can be seen here: https://webflow.com/website/pico-example

 

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

Initial Setup

 

Before getting started, please make sure that you have your website domain saved in your Website settings at Settings ► Website ► Add Domain. If you have multiple URLs (e.g. for testing purposes), 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 Plug-in Snippet

Webflow dashboard, select the options button on your project, and select "settings":

 

On the Settings page, navigate to the Custom Code, and enter in the snippet below into the Head Code section:

 

 

⚠️ NOTE: Replace INSERT YOUR ACCOUNT ID in the snippet with your Pico Account ID which you can find under the WordPress section of the Apps settings at https://dashboard.trypico.com/settings/account. Do not remove the quotation marks surrounding the Account 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,"https://gadget.pico.tools/wrapper.min.js", "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

On the pages that you'd like Pico to display, you will need to include the page properties snippet. Navigate to the Webflow page builder and hover over the page you would like to have Pico display on. Then select the settings wheel and scroll down to the "Custom Code" section and enter into the "Before 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.

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

 

You'll need to include the page properties snippet on all pages that you'd like Pico to run on.

 

Step 3: Setting Up a Signup Wall

To set up the signup 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 setting up your Offers.

 

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: https://trypico.webflow.io/pico-webflow-example-page

Related articles