Custom Boxes Guide

Personalize your personal page to the max with Custom Boxes, a feature unique to One Profile

What are Custom Boxes?

Custom Boxes are customizable floating blocks on your profile page consisting of a title and a content. With Custom Boxes, you can personalize your page by adding customized call-to-action buttons to bring visitors to your Patreon page, your Substack newsletter, your Medium page or literally anywhere you want on the internet. You can even write long texts, post linkable pictures, embed YouTube videos, Instagram Galleries, and Twitter Timelines, display Google Maps, and also create testimonial boxes.

Creating a Custom Box

Go to https://www.oneprofile.info/custom_boxes and click on the "Add a Custom Box" button.

Select a type of Custom Box:

The types of Custom Boxes

Each type of Custom Box has a number of fields. They are:

  1. Title (required)

  2. Content/Caption (required)

  3. Column (required)

  4. CTA link (optional)

  5. CTA description (optional)

  6. CTA icon (optional)

Call-to-action (CTA) buttons are the buttons you use to guide visitors towards your goal conversion.

CTA icons on One Profile are powered by Font Awesome. You can freely choose any icons within the library, even the PRO icons. The format that you need to copy and use is something like this:

<i class="fal fa-planet-ringed"></i>

For Custom Boxes that allow image, you can either upload an image from your devise or paste an image link. If you uploaded a picture and paste an image link, the image link takes precedence. To use the uploaded picture, simple remove the image link and save changes.

Column refers to the column that your Custom Boxes will be placed on. There are 2 columns on your page. Column 1 is on the left and Column 2 is on the right. Click on the 'Profile Layout' to view how it looks like.

In Mobile View, all boxes on column 1 will be shown first followed by boxes on column 2. This is true for both Essential Boxes and Custom Boxes. Essential Boxes are fixed on a certain column.

Sorting your Custom Boxes

On this page https://www.oneprofile.info/custom_boxes, you can organize how your Custom Boxes will look like on your personal page.

There are 2 panels on this page. The left panel is the Search Custom Boxes Panel and the right panel is your Box Arrangements Panel.

Search Custom Boxes Panel

This panel is used to filter through your Custom Boxes for the purpose of rearranging or editing them.

Box Arrangements Panel

The key components of this panel are

  1. Box preview

  2. Box position

  3. Column number

  4. Publish/Unpublish, Edit and Delete Buttons

Box preview will show you a preview of how your Custom Box will look like on your personal page. The CTA button will also work as intended. However, the main purpose of Box preview is to allow you to easily identify your Custom Box. Because this is only a preview; large photos will appear compressed, Google Maps are not shown, Twitter Timeline and Instagram Feed will be replaced with account handles. To see them in action, simply preview your page.

Box position determines the arrangement of the Custom Boxes on your personal page. The Box with the lowest position number will be at the top. For example, Box position 1 will be at the top of your personal page after Essential Boxes, Box position 2 will below Box position 1 and the arrangement follows in that order.

Essential Boxes are boxes that are fixed on certain columns and arrangements. They can't be rearranged and their titles are not editable. They can, however, be removed from your page to make way for Custom Boxes. Essential Boxes are a quick way to set up your profile page and is meant primarily for non-unicorn owners.

Column number denotes the Column your Custom Box is assigned to. It is recommended to filter by Column when you sort your Custom Boxes. The next section teaches you how to do it, it's very easy.

How to Sort Custom Boxes

Simply click and hold on the Box and drag it above or below the other Box to change its Box position. As mentioned before the Box position's number determine where you Custom Box will appear on your personal page.

It is important to filter the Custom Boxes according to your intended Column first before you sort them. For example, if you want to sort Boxes on Column 1, click on Filter by Column on the left panel and select either Column 1 or 2, and click Search Boxes to start the filter. Once filtered, you can begin sorting your Boxes.

Here are a couple of important things to take note of:

  1. When Boxes are not filtered according to Column, the Box position doesn't matter and they may appear mixed up.

  2. After you drag and drop a Box, give it a couple of seconds for the page to refresh itself automatically and it will then show the changes. If it doesn't change — which rarely happens — you will need to refresh the page manually.

Custom Box Options

Email Capture Box

Allows you to create a simple form that collects visitor's email address and optionally, name.

When the form has been submitted by a visitor, you will receive an email from One Profile's Postman notifying you about the submission together with the email of the visitor (and name if enabled).

One Profile does not store any of your collected email addresses in our servers nor do we provide a service for storing email addresses. We recommend using an automation tool like Zapier where you can detect an email from us and automatically include the contents in a spreadsheet tool like Google Spreadsheet.

Gumroad Button Box

How to get your Product URL

  • Log in to your Gumroad account as a seller

  • Click on Products

  • Select a product

  • Click on share

  • Click on the copy URL button

  • Paste it into the Custom Box field

Checkout Page Button Box

How to get your data-seller and data-checkout

  • Log in to your https://checkoutpage.co/ account

  • Click on Pages

  • Select a Page

  • Click on Use and an overlay will pop up

  • Scroll down until your reach the Add as pop-up on your site section

  • Copy the content of data-seller and data-checkout and paste it into the Custom Box field. Below is the example of the code-block given.

<button
class="cp-button"
data-seller="copy this"
data-checkout="copy this">
Buy now
</button>