I’m trying to implement the workaround on how to embed a custom code.
I got the following code from Claude.ai and inserted it under “Custom Code”
<div style="text-align: center; padding: 20px;">
<button style="background-color: #FF4500; color: white; padding: 10px 20px; border: none; border-radius: 5px; font-size: 16px; cursor: pointer;">
Custom Button
</button>
</div>
But it didn’t work.
I asked it again, and it provided the following solution:
I see the issue. The code you’ve added is placed in the section of the HTML document, which is not where visible elements like buttons should go. The section is typically used for metadata, stylesheets, and scripts, not for content that should be displayed on the page.
To create a visible button, we need to modify our approach:
First, we’ll create a style in the section.
Then, we’ll need to find a way to insert the actual button HTML into the body of the page.
Let’s start by updating the code in the section:
<style>
.asset-allocation-button {
background-color: #FF4500;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
</style>
Now, you should place this style code inside the section of your Softr page.
For the actual button, you’ll need to find a way to insert HTML into the body of your page. Softr likely provides a way to add custom HTML elements to your page content. Look for options like “Custom HTML”, “HTML Element”, or “Code Block” in the Softr page editor.
When you find that option, insert this HTML:
<button class="asset-allocation-button">Asset Allocation</button>
Any idea where to insert that?
Any ideas how to get that custom button on a page?