Initial Setup

Before getting started, please make sure that you have your URL saved in your account's Website settings at Settings > Website. 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 Gadget 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. You can also find this snippet at the bottom of the website settings here: https://dashboard.trypico.com/settings/website

⚠️ NOTE: Replace INSERT YOUR ACCOUNT ID in the snippet with your Pico Account ID, which you can find in your Settings under Account. 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.

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

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

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 ID 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, selected "Advanced" and 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 page locking rules set within your Pico Website settings.

The locked section will show a "Read More" button where the text can be customized under the Website settings in Pico as well.

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?