When you embed the Watermelon widget on your website using an , it is displayed by default at 100% width and height. This means the widget fills the entire screen, regardless of the structure or layout of your page. As a result, the widget may overlap other elements such as your header or footer.

📘

This fullscreen behavior is default because the widget does not account for existing elements on your site.

Styling the Widget with Custom CSS

At the moment, Watermelon does not offer built-in options to adjust the widget’s size through the widget settings. However, it is technically possible to style the widget differently by applying custom CSS on your own website.

For example, you can set a fixed height and apply additional styling like this:

</script>`} /> Explanation of the example

• borderRadius: '15px': Adds rounded corners to the iframe.
• width: '100%': Ensures the widget takes up the full width of its container.
• height: '700px': Limits the widget height to 700 pixels so it doesn’t take over the entire screen.
• srcDoc: Embeds the Watermelon widget script with your specific configuration.

❗️

Make sure to replace your_id with your actual data-watermelon-widget-id and data-watermelon-settings-id.

Implementation Tips

• Place the inside a container with your preferred layout or positioning.
• For responsive design, consider using vh (viewport height units) or media queries to adapt the widget height based on screen size.
• Always test the widget across devices and browsers to ensure it displays correctly within your layout.

Need help?

If you need help with customizing the widget or writing CSS, feel free to reach out to our support team. We’re happy to assist you!