Need help? You’ve come to the right place

What’s New Getting Started Building Integrating Publishing

The HTML widget

Last Updated

The HTML widget allows you to add items and functionality that may not already be built into the Drag & Drop Builder.

 

Using the HTML widget

Adding your HTML code

To add your code, navigate to Widgets on the left sidebar of the builder, then click "Show More" and drag the HTML widget onto your page.

Click the widget or hover over it and click the edit icon to open its settings. Paste your code and make sure to click Save within the HTML widget after adding or changing your code to ensure that it’s retained when you publish or update your page.

TIP: If after publishing, the HTML element you added is off-center. You can try adding <center> before the beginning of the HTML code in the widget and </center> at the end of the code to try to align it.

Common use cases

Surveys, maps, Facebook comments and more 

The HTML widget can be used to add functionality that may not already be built into the builder. Below are a few examples of common use cases. Keep in mind that we do not provide the code for these elements—services will often provide code you can use on webpages. Look for an “embed” or “iframe” option in the service you use to see if they provide HTML code.

Third-party forms

We would highly encourage you to utilize the API integrations Leadpages offers and if you don't see the service you use, try setting up the connection with our Zapier integration.

However, if the integration service you use is not available in Leadpages integrations or Zapier, we recommend embedding your integration's form using the HTML widget.

Most email service providers and integration services offer embeddable forms. Once you have created your form within the service and copied its embed code, simply paste it into the HTML widget in Leadpages.

Google Maps

Steps to copy Google Map embed code

    1. Enter the location you'd like to embed into Google Maps then click Share.
    2. Select the "Embed a map" tab.
    3. Click Copy HTML and paste it in a note somewhere you can reference it in a moment.

Steps to embed the map in Leadpages:

  1. Add an HTML widget where you'd like the map to appear on your page.
  2. Paste the code below into the HTML widget and replace only the iframe part of the code with the iframe embed code you copied from Google Maps.
  3. Click Save and update your page at the top-right corner.
<style>
.google-maps {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
</style>
<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>

Facebook Comments

Click here for more info on embedding features Facebook has to offer.

Surveys

Popular survey software companies offer embeddable HTML code so that you can add the survey directly to your pages created with Leadpages.

Google Calendar

Follow Google's directions here on generating the HTML code of your Google calendar to embed it on one of your pages.

Carousel or Image Gallery

There are numerous online tools to create image galleries as well as developers who could provide you with the code to create an image gallery like the one below.

Music and Podcasts

If you’d like to have a song or podcast on your page you can add an audio player by embedding code from an audio-hosting platform. Here are a few guides for popular services:

Customization and Styling Details​

      • All code added to an HTML widget is taken as is, and is not validated by our builder.
      • Customizing and styling content added to an HTML widget must be done within the HTML itself.

Tips and Frequently Asked Questions

Where can the HTML widget be used?

The HTML widget can be placed alongside any widgets on your page. When placed next to another widget, the width of HTML modal can be adjusted. Keep in mind that unlike other widgets, sizing and alignment are determined mostly by your code.  You can also use them in a pop-up.

Why isn't my HTML widget working in the builder?

The HTML you use will not be rendered live in the builder, but will be able to see it in the preview mode or live version of your page.

What happens if I change something and it stops working?

We recommend using caution when editing your HTML code. Please note we cannot provide support for third-party code or help troubleshoot issues you may have with it. If you need assistance with your code, please consult your code provider’s documentation or support options.


Need more help?

You can always get in touch with our support team—just click Support in your Leadpages navigation menu, or submit a ticket ↗

Was this article helpful?
Powered by Zendesk