How can I add Google features to a page created in Hotmart Pages?

If you want to display a map, calendar, form, or another Google feature directly on your page, you can integrate it using Hotmart Pages.

Features like Google Maps, Google Calendar, and Google Forms can be embedded into your page through an HTML code provided by Google. This way, visitors can view and interact with the content without leaving the page.

In this article, you’ll learn how to generate the embed code in Google, how to correctly add it to Hotmart Pages, and what to consider to ensure the integration works as expected.

How does embedding Google features work?

The integration is done using an embed code provided by Google. This code is an HTML snippet that allows content to be displayed on another website. In Hotmart Pages, this code must be added using the HTML element available in the page editor.

Each Google feature has its own process to generate the code, but it usually follows the same pattern: find the sharing option and copy the embed code.

How to generate the embed code in Google?

Below are examples of the most commonly used features:

• Google Calendar: create or select an event, go to the sharing options, and choose the publish or embed option to copy the HTML code.
• Google Maps: search for the desired address, click Share, and select Embed a map to get the code.
• Google Forms: after creating the form, click Send and select the embed icon (<>) to copy the HTML code.

In all cases, Google will display an HTML code snippet. This is the content you should use in Hotmart Pages.

If the feature doesn’t allow you to adjust the size while generating the code, you can edit the width and height attributes directly in the HTML before inserting it into the page.

How to insert the code in Hotmart Pages?

With the code copied, follow these steps:

1. Access your account through the link http://app.hotmart.com.
2. In the side menu, click Marketing and then Page creator.
3. Go to My pages.
4. Choose the desired page and click Edit, or create a new page.
5. In the editor, click the + icon to add structures and elements.
6. Select the HTML element and drag it to the desired location.
7. Click Edit HTML and paste the code provided by Google.
8. Adjust visual settings such as size, inner spacing, and visibility if needed.
9. Click Publish to apply the changes.

After publishing, the feature will be displayed directly on the page according to your configuration.

Important information about the integration

Some points to consider when embedding Google features:

• The feature’s functionality depends on the permissions set in Google.
• Changes made to the original content (such as editing an event or form) are automatically reflected on the page.
• Some features may have display limitations on mobile devices, according to Google’s rules.
• If the code is inserted incorrectly, the content may not be displayed.

These aspects help explain situations where the feature appears differently than expected.