Skip to main content
Custom code is available for users on the Basic plan and above.
The Custom code block is a powerful feature which allows you to insert custom snippet of code, including HTML, CSS and/or Javascript, anywhere in your application. The code snippet will be added inside the html element. NOTE: If you want to add custom code snippets inside element, or at the end of the page, before the element closes, you can do that from Settings => Custom Code for application level changes or from Page Settings for page level modifications. This tutorial covers the cases when you want to add a code snippet anywhere inside the element.

​
Adding a Custom code block

Custom code is added through the Custom Code block in Blocks => Static => Custom code.
You need to be on a paid plan to be able to use the Custom code block.

​
Adding the code inside the block

Next, you need to open the block settings and paste the code snippet you would like to add. It can contain standard HTML elements, elements containing custom CSS rules, and even tags containing JavaScript code.
Custom Code block

Custom Code block

 Now, you can Preview your Softr app to see the changes.

​
Use Case - Embed Calendly in Softr app

Let’s see how the Custom Code block works on a specific example. We’ll use it to embed a Calendly widget within our Softr app.

​
Getting the Embed Code

In our Calendly account, we are going to navigate to Share Your Link in the Account dropdown menu.
Share your link

Share your link

 In the pop-up that appears next, let’s choose the embed option as shown below.
Selecting "Add to Your Website”

Selecting 'Add to Your Website”

 Next, we’ll select Inline Embed and hit continue.
Choosing "Inline Embed”

Choosing 'Inline Embed”

 In the following screen, we can customize our Calendly widget, and, when we’re done, we need to click Copy Code.
Copying the Calendly page code

Copying the Calendly page code

​
Adding the code to the block

Finally, we will go back to our Softr app, paste the code in the Custom code block, and hit Preview to see what it looks like.
Applying the code

Applying the code