Learn how to add custom functionality into your B12 website using HTML/JavaScript
|
Last updated: 23rd Jan. 2025 |
Need to add a custom feature to your website? B12 lets you integrate custom HTML, CSS, and JavaScript code, enabling you to create unique elements such as forms, maps, or interactive buttons.
What is custom HTML/JavaScript?
Custom HTML/JavaScript refers to code written in the HyperText Markup Language (HTML) and JavaScript programming language. HTML structures the content of a web page, while JavaScript adds interactivity and dynamic behavior. By embedding custom HTML/JavaScript code into your B12 website, you can create unique and tailored features that aren't readily available in B12.
How to acquire custom HTML/JavaScript embed code
Note: Adding custom code can potentially affect your website's overall performance. Make sure you're comfortable with the code you're adding and test it thoroughly before publishing.
There are several ways to acquire custom HTML/JavaScript code:
- Hire a web developer
- You can partner with freelance developers who can create custom code tailored to your specific needs via websites like Upwork and Fiverr. Alternatively, you can contact web development agencies with teams of developers who can handle complex projects and provide ongoing support.
- Use online code libraries and templates
- Another way to obtain your custom HTML/JavaScript embed code is to check out online code libraries and templates. CodePen, for instance, is a popular platform where developers share their code snippets, including HTML, CSS, and JavaScript. You can find pre-built components and templates to customize. You can also check out GitHub, where you can find various scripts and libraries to incorporate into your website.
How to add custom HTML/JavaScript embed code 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. On the B12 menu, select your name
4. From the menu that appears, select Enable expert mode
5. Select Yes, continue when prompted to unlock the expert mode
6. Navigate to the Pages menu
7. Under the Pages menu, choose the specific page where you want to add the custom HTML/JavaScript code (e.g., Home, About, Services)
8. Next, select the section you want to modify
9. On the left side of the screen, under Appearance > Layout, select the option that says Customize it manually.
10. In the displayed layout tree, locate and click on the component that corresponds to the column you want to modify (e.g., Row 1, Column 1).
11. Click the Customize this component button
12. The Component HTML box will appear. Examine the code and make any necessary changes
Note: To view all lines of code, click the Wrap text option in the bottom right corner. You can also consider copying the original code to a text editor like Notepad.
13. After making any modifications to the code, select Save
14. Your changes should then be visible in the website editor.
If you're unsure about adding custom code, explore other options like B12's built-in features or third-party integrations that might achieve the same result.
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.