Custom Elements in the Site Builder

In this article, you will learn more about the Custom Elements in the Site Builder. 

These elements can help you customize your site more and make it unique. Here’s a list of the custom elements that you can choose from. 

Custom JS/HTML

Adding a Custom JavaScript/HTML element will be helpful for including scheduling software and other tools in your funnel page. 

To use this element: 

• Click and drag this element to the column where you want it. 
• Click on the element to open the menu settings on the right
• Click on Open Code Editor and add your code

Note: Due to the varied nature of coding, we don't troubleshoot or edit custom code.

Survey

This element will allow you to select from the drop-down menu what survey you want to show on this page. 

To use this element: 

• Click, drag, and drop this element in the column you want it to be
• Select from the drop-down menu, which forms you want to use
• Save

Note: You will need to have created a survey first. 

Calendar

With this element, you can select which calendar to show up on your page. 

To use this element: 

• Click, drag, and drop this element into the desired column
• Click on the element, and select from the drop-down menu which calendar you want to select
• Save

Note: You will need to have a calendar created first

Map

This element will help you add a map to your site that has a pin in your address. 

To use this element: 

• Click, drag, and drop this element into the desired column
• Click on the element to open the menu settings on the right
• Click on Open Search Box
• Search for your address, check that the pin is in the right place, adjust if needed, and save. 

SVG

This stands for Scalable Vector Graphics (SVG), which is a web-friendly vector file format. This stores images via mathematical formulas based on points and lines on a grid.

To use this element: 

• Click, drag, and drop this element into the desired column
• Click on the element to open the menu on the right
• You can edit the colors in your SVG file by adding your own. 

Note: Your file must be in SVG format. 

Reviews: 

This element will be helpful to show the reviews your leads have given you. 

To use this element: 

• Click, drag, and drop this element into the desired column
• All the reviews you have will appear here once you are previewing your page or checking it on live mode

Block Editor

The Block Editor for the Funnels and Website Builder is designed to enhance the user experience with improved customization options and a streamlined interface. This allows you to apply custom fonts to highlighted text, use new menu options for subscripts and superscripts, and manage bullet lists more efficiently.

To use this element:

• How to Use?
• Access Editor
• Edit a funnel or website by selecting the site tab from the sidebar in the desired location.
• Add Elements
• Click on “Add Elements” and choose the text you want to format.
• Customize Text
• Use the Block Editor to apply custom fonts, subscript, superscript, and organize bullet lists.

• Use the Block Editor menu to apply custom fonts, subscript, superscript, and organize bullet lists.
• It includes the following enhancements:

Custom Fonts for Highlighted Text: You can Choose custom fonts directly from the Block Editor to change the text of the highlighted text blocks, allowing for more personalized and visually appealing designs.

Menu Options for Subscript and Superscript: Easily wrap text in subscript and superscript using the menu options in the Block Editor.

Dedicated Bullet List Section: Bullet lists have their own section, making list creation and management more straightforward.

Removal of Unwanted Paragraph Options: Unwanted paragraph options have been removed, improving usability for everyone.

FAQs

1. What is the purpose of the Custom JS/HTML element?

The Custom JS/HTML element allows users to add custom JavaScript or HTML code to include external tools, like scheduling software, on their site.

2. Can Referins troubleshoot or edit custom code added to the Custom JS/HTML element?

No, troubleshooting or editing custom code is not supported due to the varied nature of coding.

3. What should I do before using the Survey or Calendar element?

Ensure you have created the survey or calendar beforehand, as you can only select from existing options in the dropdown menu.

4. How does the Map element function?

The Map element lets you embed a map with a pinned address by searching and adjusting the location in the menu settings.