Learn how to enhance your B12 site’s functionality with custom HTML widgets
Written by: Madeline B. Last updated: 23rd Jan. 2025 |
A custom HTML widget is a piece of code that, when added to a webpage, can display a variety of interactive elements. This could range from simple text boxes to complex calculators or real-time data feeds. By embedding custom HTML widgets into your B12 website, you can add features that aren't natively supported by B12 and tailor your website to your specific needs and target audience.
What is a custom HTML widget?
A custom HTML widget allows you to create tailored, interactive elements on your B12 website. This feature is ideal for users who need specific functionalities or designs that aren't available in B12's built-in widgets. By embedding custom HTML code, you can bring your unique vision to life.
How to acquire custom HTML widget embed code
There are two ways to acquire a custom HTML widget embed code:
1. Developer-provided code
If you're working with a developer, they'll provide you with a specific HTML code snippet.
2. Online widget generators
Many websites offer free widget generators that allow you to create custom widgets without writing code. These tools provide user-friendly interfaces to customize your widget's appearance and functionality. Once you've finished creating your widget, the generator will provide you with an embed code that you can add to your B12 website.
How to add custom HTML widgets to your B12 website
1. Log into your B12 editor
2. On the lefthand editing panel navigate to the section labeled Website
and select it
3. Once you're in the Website
tab, click Pages
> Home
4. Navigate to the button that says Add Section
and select it
5. Select Add Integration
and then select HTML
6. Copy and paste the widget embed code into the B12 code box
7. Select Add integration
8. To preview your widget, select Preview
in the upper right hand corner of your editor
9. To ensure these edits are live, publish your page by clicking
Publish
in the upper right hand corner of your editor
This is a sample of what your webpage will look like when you add a clock widget embed code:
Need more help?
If you encounter any difficulties or have specific questions, don't hesitate to reach out to B12's support team at hello@b12.io.