Skip to main content

Installing Pico on Your Carrd.co Website

  • Updated

This article details how to install Pico onto a Carrd.co website. It also includes instructions on customizing the page content that Pico puts behind registration or paywalls.

⚠️ NOTE: Installing Pico onto a Carrd.co website requires the Pro Plus subscription to utilize custom code embedding and advanced element settings.

Video Guides:

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 Pico Snippet

Create a new element of Embed and insert it at the top of your page. Change the Style options of Hidden and Head. Copy the snippet below and insert it into the code section of this Embed element.

⚠️ NOTE: Replace INSERT YOUR ACCOUNT ID in the snippet with your Pico Account ID which you can find in the Account section of your Settings. Do not remove the quotation marks surrounding the Account ID.

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

Step 2 - Install the Page Properties Snippet

Create an additional Embed element on your page just below the initial one. In this element, we will store the page properties. Make the Style Hidden and Body End.

For the sake of this example, we have utilized a simplified version of the Page Properties Snippet taken from the Pico Installation Guide. For your page, you will want to make sure you review the snippet code from the installation guide and update yours to your liking. The code used in this example is the following:

At this point, Pico is now installed on your website and will show up at the bottom right-hand corner.

If you'd like to set up gated content with registration walls and Paywalls, then you can continue to do so following the instructions below.

Step 3 - Set up a registration wall

To set up a registration wall, you will need to utilize two containers. One container will hold the content you would like to show when someone who has not registered visits your website. The second container will hold the content you would like to hide from non-registered users.

Starting with the content you would like to show to non-registered users, create a container, and add the following classes to it:

PicoSignal 
HideWhenRegistered

Next, we will need to create a button that will manually trigger the Pico registration form. Add a button to your page layout within the container we just created. On the button, adjust the styling to your liking, then add a class of "PicoButtonRule" to the classes field of the button settings.

PicoButtonRule

Additionally, we will want to add an On Click function to the button to prevent it from loading a new page. To do this, set the following in the On Click field of the button.

return false;

Since we are using the class "PicoButtonRule" this will override for all buttons with that class so we only need to do this once.

For the content that you would like to show when registered, you will want to create another container that has the following classes:

PicoSignal
ShowWhenRegistered

Next, you will want to return to the top of the page and either add a third embed object or add this code in your first embed object above the script code. This object will set us up to help style the page and tell it how to display the containers properly. This is the code that will hide the content by default unless someone is registered or paying.

This piece is what controls what displays and what does not. If the user registers or are already registered, then they will see just the content for registered users. Otherwise, they will see the non-registered information.

Once you have completed this step, you will now have the Pico extension installed, and you will have successfully set up a registration wall for your users.

Step 4 - Set up a Paywall

Setting up a Paywall is very similar to setting up the registration wall. You'll need two containers, one for non-paying members and one for paying members. The non-paying section will contain an Embed element which will show a button for the members to click to purchase.

First, let us start with the content we will show to non-paying members. Create a container, then set the classes to the following:

PicoSignal 
HideWhen[InsertTierNameHere] (e.g. ShowWhenBasicPlan)

Within that container, add any text or content you'd like to show to non-paying customers, then add in a Button. You will want to make sure that the button also has the "PicoButtonPlan" class set as well.

PicoButtonPlan

Additionally, we will want to add an On Click function to the button to prevent it from loading a new page. To do this, set the following in the On Click field of the button

return false;

Next you will want to create a new Embed that includes this code below. This will tell the PicoButtonPlan to properly fire the Pico plan.

Next, you'll need to create the second container element. Fill in the content that you would like to hide from non-paying members and the content you want to show to paying members. Then fill in the following values for the classes on the container element.

PicoSignal 
ShowWhen[InsertTierNameHere] (e.g. ShowWhenBasicPlan)

Finally, we will need to go to the first Embed element we created on the page at the top. Within that embed, or in a new one, you will want to have the following code above the Pico script tag. If you already have a style tag for CSS, you can simply include just what is between the style tag below.

You can see our completed example here: https://pico-example.carrd.co/

Related articles