Embedding the Chat Widget in an iframe

In this guide, you’ll learn how to embed the Watermelon Chat Widget script in an iframe. Using an iframe ensures that the chat widget is securely embedded on your webpage while maintaining seamless functionality. Keep in mind that this process requires some basic knowledge of HTML and CSS.

What is an iframe?

An iframe is an HTML element that allows you to embed external content, such as a webpage or script, within another webpage. It isolates the embedded content, preventing conflicts with other scripts or styles on the parent page.

Why use an iframe for the Watermelon Chat Widget?

Using an iframe to embed the Watermelon Chat Widget lets you place it in a separate widget or section on your website, making it appear fully integrated into your design. For example, you can embed the chat widget in a specific area, like a sidebar or floating panel, ensuring it blends naturally with the rest of your site’s layout.

By using an iframe, the chat widget’s functionality remains isolated from the main website code. This prevents potential conflicts with your existing styles, scripts, or plugins, ensuring the widget runs smoothly and looks professional.

Steps to embed the Watermelon Chat Widget script in an iframe

Set the Chat Widget Settings to embedded
Start by changing the settings of your Chat Widget to "Embedded" in Watermelon.
Then set "Automatically open the widget" to "On". You can do this under "Placement"

Add an iframe to your webpage
Now create an iframe element for your HTML where the Watermelon Chat Widget will appear.

<iframe
  style="border-radius: 15px; width: 100%; height: 700px; border: none;"
  srcDoc='
    <script async type="module" src="https://chatwidget-prod.web.app/embed/init.iife.js" data-watermelon-widget-id="your-widget-id"
data-watermelon-settings-id="your-settings-id">
</script>
  '>
</iframe>

srcDoc: Specifies the Chat Widget script that the iframe will load. You can copy the above code to start with.
width and height: Define the size of the iframe. Adjust these values to suit your webpage layout.
Replace data-watermelon-widget-id and data-watermelon-settings-id with the IDs provided for your specific widget. You can find these IDs in your Watermelon Widget under "Placement"

Placing the iframe
Place the iframe in your desired location in the website code. Example HTML code:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Watermelon Chat Widget</title>  
</head>  
<body>
  <div>
    <!EXISTING WEBSITE CODE>
    <iframe
      style="border-radius: 15px; width: 100%; height: 700px; border: none;"
      srcdoc='
        <script async type="module" src="https://chatwidget-prod.web.app/embed/init.iife.js" data-watermelon-widget-id="your-widget-id" data-watermelon-settings-id="your-settings-id"></script>
      '>
    </iframe>
  </div>
</body>

</html>

Test the iframe Integration
Open the webpage containing the iframe in your browser and confirm that the Watermelon Chat Widget loads as expected. You should see the chat widget displayed inside the iframe.

Embedding the Watermelon Chat Widget script in an iframe keeps it isolated and secure while maintaining full functionality. By following these steps, you can seamlessly integrate the widget into your webpage. If you encounter any difficulties or need assistance, don’t hesitate to contact our support team!