How can I open the Hotmart widget when I click on my Webflow button?

Published on
September 22, 2023

To open the Hotmart widget when a user clicks on a Webflow button, you can follow these steps:

  1. Add Hotmart script to your Webflow project:
  • Sign in to your Hotmart account and go to "Products" in the left-hand menu.
  • Locate the product you want to promote and click on "Widget."
  • Customize the appearance and behavior of the widget according to your needs.
  • After you are done, copy the HTML code provided in the widget configuration modal.
  1. Insert the Hotmart script into your Webflow project:
  • Go to your Webflow project and open the Designer.
  • Select the page where you want to add the button for the Hotmart widget.
  • Drag and drop a Button element onto the page or choose an existing button to use.
  • With the button selected, click on the "Settings" tab on the right-hand side panel.
  • Scroll down to the "Attributes" section and click on the "+" button to add a new attribute.
  • Set the attribute's name to "onclick" and its value to the Hotmart widget script code you copied earlier.
  1. Publish and test your Webflow project:
  • Publish your Webflow project to make the changes live.
  • Go to your published website and click on the button you added.
  • The Hotmart widget should open as expected, allowing users to interact with it for product purchase or other actions.

By following these steps, you can open the Hotmart widget when clicking on a Webflow button, providing a seamless user experience for your visitors.

Additional Questions:

  1. How do I add a custom script to my Webflow project?
  2. Can I customize the appearance of the Hotmart widget in Webflow?
  3. Are there any other ways to integrate Hotmart with Webflow?