⚠️ This article refers to Pico Version 1.17 and will be removed or updated in the future once we release Pico Version 2.0.

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.

Step 1 - Install the Widget Snippet

To be able to load and run Pico on your Dorik.io website, you'll need to copy the following code and place it in your page settings.

⚠️ 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 https://publisher.pico.tools/settings/integrations. 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,"https://gadget.pico.tools/wrapper.min.js", "INSERT_YOUR_PUBLISHER_ID"); </script>

This snippet will need to be inserted under "Page Settings", "Advanced", "Header Code":

Step 2 - Send information about each page to Pico using the Page Properties Snippet

Next, we will need to include the Page Properties Snippet. This will be entered in the "Footer Code" section of the previous menu on Dorik. For more information about the Page Properties snippet and the values that can be set within it, please view our full installation guide here: https://help.trypico.com/en/articles/3199263-installing-pico-on-your-website

For this example, we will be using a slimmed-down version of the Snippet:

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

Step 3 - Wrap lockable content

If you'd like to only show some content on your Dorik.io website to show only when someone is registered or paying, you can do so by adding the #Pico class to the section that you would like to hide.

To do so, hover over the section with content you are looking to hide. Then select the "Edit Section Style" option:

In the new popup, select "Advanced" then "HTML Selectors". Under "HTML ID" put in "pico":

This will tell Pico that any content within that section can be modified based on the registration and subscription rules set within Pico.

The locked section will show a "read more" button, this text can be customized here: https://publisher.pico.tools/settings/site-interaction

Step 4 - Taking Pico Further

Once you've confirmed that the basics are up and running, we've provided a list of helpful next steps and best practices to consider for developers: https://help.trypico.com/en/articles/3443212-using-pico-data-to-customize-your-site

Our example page: https://pico-example.dorik.io/

Did this answer your question?