How to add Embedded code

The Embed component adds custom HTML, CSS, and JavaScript to your landing page. Use it for advanced customization, third-party widgets, or integrations not covered by other components.

What Embed does

This component runs custom code on your landing page. You can add anything from styled buttons to third-party widgets, tracking scripts, or custom layouts.

Use this when you want to:

Add a custom styled button or call-to-action
Embed a third-party calendar, map, or chat widget
Include tracking pixels or analytics scripts
Create custom visual layouts
Add social media embeds not covered by other components
Integrate with external services

Note: This component requires knowledge of HTML. If you are not comfortable with code, the other components may better suit your needs.

Step 1: Open your landing page editor

Go to your Dashboard, select your QR code, and click Edit.

Step 2: Add the component

Click Add component at the bottom of the editor panel. Select Embed (Custom Code) from the menu.

Step 3: Enter your code

Paste or type your HTML code in the code field. The code area supports up to 65,535 characters.

Step 4: Save your changes

Click Save to see your embedded code on the landing page.

Code requirements

Your code must follow these rules:

Requirement	Details
Starting tag	Code must begin with `<div>`
Not allowed	Do not use `<html>` or `<body>` tags
Character limit	Maximum 65,535 characters

Correct format:

<div>
  <!-- Your content here -->
</div>

Incorrect format:

<html>
  <body>
    <!-- This will not work -->
  </body>
</html>

Example: Custom styled button

Here is sample code for a custom call-to-action button:

<div style="text-align:center; margin:5px 0;">
  <a href="https://yourwebsite.com"
    style="
      display:inline-component;
      padding:14px 28px;
      background:#2B7FFF;
      color:white;
      font-size:16px;
      font-weight:600;
      border-radius:10px;
      text-decoration:none;
    "
    onmouseover="this.style.opacity='0.85'"
    onmouseout="this.style.opacity='1'">
    Get Started
  </a>
</div>

This creates a blue button with hover effect that links to your website.

Common use cases

Third-party calendar widget

Embed a booking calendar from services like Calendly:

<div style="min-width:320px;height:600px;">
  <!-- Paste calendar embed code here -->
</div>

Google Maps embed

Add a location map:

<div style="width:100%;height:300px;">
  <iframe
    src="https://www.google.com/maps/embed?pb=YOUR_MAP_EMBED_CODE"
    width="100%"
    height="300"
    style="border:0;"
    allowfullscreen=""
    loading="lazy">
  </iframe>
</div>

Tracking pixel

Add analytics or tracking code:

<div style="display:none;">
  <!-- Your tracking pixel or script here -->
</div>

Custom countdown timer

Add urgency with a countdown:

<div id="countdown" style="text-align:center;font-size:24px;padding:20px;">
  <!-- Timer script here -->
</div>

Tips for best results

Test thoroughly. Preview your page after saving to make sure the code works.
Start simple. Add small pieces of code and test before adding more.
Mobile first. Test how your code looks on phone screens.
Use inline styles. External stylesheets may not load. Keep CSS inline.
Avoid heavy scripts. Large JavaScript files slow down your page.

Troubleshooting

Issue	Possible cause	Solution
Code not showing	Missing `<div>` wrapper	Wrap all code in `<div>` tags
Styling broken	External CSS not loading	Use inline styles instead
Script not working	Browser security blocking	Check console for errors
Layout broken	Invalid HTML	Validate your HTML code

Common questions

Is custom code safe?

Your code runs on your landing page. Be careful with code from unknown sources. Do not add code you do not understand.

Can I break my landing page?

Bad code can affect how your page displays. If something breaks, delete the Embed component or remove the problematic code.

Can I use external JavaScript libraries?

You can link to external scripts, but they may slow down page loading. Use sparingly.

Will my code work on mobile?

It depends on your code. Always test on mobile devices. Use responsive CSS for best results.

Can I embed social media posts?

Yes. Copy the embed code from platforms like Twitter or Instagram and paste it in the Embed component. Wrap it in a <div> tag.

How do I debug my code?

Use your browser's developer tools (F12) to see errors in the console. Check the Elements panel to see how your code renders.

Search

What Embed does