Custom Code

Learn to add custom code to a section of your page. The Custom Code block can be used to embed or add custom code to include schedulers, videos, or customize the appearance of a section of your page, and more.

In this article:


Add and Remove a Custom Code block

To add a Custom Code block:

  • Click the section you want to edit or create a new one.
  • In the sidebar, select Add Content.
  • From the list, select Custom Code.
  • Your newly created Custom Code block will generate at the bottom of the section.
  • Click Save to keep your changes:

customcodeblock

To remove a Custom Code:

  • In your Page, hover over the existing Custom Codeand click Edit.
  • In the sidebar, scroll to the bottom to click Delete This Block.
  • Click Save to keep your changes:

Enter the Custom Code

  • In your Page, hover over the existing Custom Code block you want to edit and click Edit.
  • In the Code field, paste a copied embed code or enter your custom code.
  • Click Save to keep your changes:

calendlyflow


Customize your Custom Code block:

In a Custom Code block, configure the Width of the block and enter your custom code.

Width

  • In your Page, hover over the existing Custom Code block you want to edit and click Edit.
  • Navigate to the sidebar and select the number of columns to adjust the width of the Block:

custom code width


Block Settings

To adjust the look and feel of the Block, configure your Block Settings by customizing the Background, Desktop and Mobile Layout, Animations, and Time Reveal.

Configure your Block Settings:

  • Hover over the Custom Code block you want to customize and click Edit.
  • Configure your Block Settings in the sidebar.
  • Click Save to keep your changes:

Background

Select a background color, adjust the Border Radius to create a rounded or squared border, and select the Box Shadow size.

Desktop Layout

Configure the layout of the Block displayed on a Desktop device. Hide the block, adjust the Text Alignment, customize the padding inside and outside the Block, remove the padding altogether, and adjust the placement of the block.

Mobile Layout

Configure the layout of the Block displayed on a Mobile device by choosing to hide or display the block, and customize the padding inside and outside the Block.

Animations

Create visual effects by configuring the animations settings for the block. Select the type, direction, delay, and duration of your animation.

Time Reveal

The Time Reveal setting allows you to offset the time before the content in a block is revealed after a visitor enters the page.

Contact support or access our 24/7 Live Chat:

Contact Support Live Chat

Previous Article

Countdown

Next Article

Event

Need Help? Chat With Us Now!