How to Add Custom Code to Your Landing Page

Most page builders box you in with their blocks and their limits. Bumbi landing pages do the opposite: you bring your own HTML, CSS, and JavaScript, and it runs as written. That means the design in your head, or your designer's file, ships exactly as intended. Here is how the custom-code model works, what you can and cannot do inside it, and how to get a polished result.

What you can build

Because you control the full markup, you can add almost anything a normal web page can have: custom fonts, animations, a countdown timer, testimonial sliders, an FAQ accordion, your own tracking pixels, or a chat widget. Your CSS styles everything, and your JavaScript powers the interactions. If you can build it as a standalone web page, it will run on a Bumbi landing page.

How the sandbox protects you

Bumbi renders your page inside an isolated sandbox. That isolation is what makes it safe to paste full code: your scripts run in their own context and cannot read or change anything in your Bumbi account or your other pages. External resources still work, so your fonts, libraries, and pixels load over the network as usual. The one deliberate limit is navigation: the sandbox blocks the page from taking over the whole browser tab, so any link or form redirect should open in a new tab.

Before you start

• A landing page created in Landing Pages, or a new one to paste into.
• Your assets hosted: images in the media library, and any fonts or scripts on a URL you can link to.

Steps

1. Open the editor. Edit an existing landing page or create one, then find the HTML editor.
2. Paste your full HTML. Include everything in one document: your markup, your CSS inside a style tag, and your JavaScript inside a script tag.
3. Fix your asset links. Swap any local image paths for hosted URLs from your media library, and confirm external fonts or libraries load over https.
4. Set links to open in a new tab. Add a target of _blank to links and to any custom form, so the sandbox does not block the navigation.
5. Preview and test. The preview runs the same sandbox as the live page, so click every button, submit every form, and resize the window to check mobile before you publish.
6. Save and Publish.

Best practices

• Inline your critical CSS. Keeping styles in the page loads faster than waiting on many external files.
• Test on mobile first. Use responsive units and check the phone width; that is where most of your visitors are.
• Keep JavaScript light. Every heavy script is a slower page and a lower conversion rate.
• Add your own pixel here if you want page-specific tracking, separate from your funnel-wide retargeting pixels.

How to know it worked

The preview and the live page match your design down to the animations and interactions, and every link and form behaves as expected in a new tab.

If something goes wrong

• An image is missing. It is almost always a local path. Re-point it to a hosted URL.
• A link or form does nothing. Give it a target of _blank so it opens in a new tab.
• A font or script did not load. Make sure it is served over https and the URL is public.

Related articles

• Build a landing page in Bumbi
• Use the media library
• Embed your webinar form