Adding a custom HTML widget to your B12 website

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