Custom Code Block Overview
Applying custom code on your Softr app.
NOTE: If you want to add custom code snippets inside <head> element, or at the end of the page, before the <body> 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 <body> element.
Adding a Custom code block
Custom code is added through the Custom Code block in Blocks => Static => Custom code.
Adding the code inside the 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.
In the pop-up that appears next, let's choose the embed option as shown below.
Next, we'll select Inline Embed and hit continue.
In the following screen, we can customize our Calendly widget, and, when we're done, we need to click Copy 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.
Last updated on August 24, 2023