Tips: Launch

How to Embed the Helply Widget in a Section (Not a Fixed Embed)

Explains how to embed the Helply widget inside a specific page section instead of using the default fixed placement.

To embed the Helply widget in a section of your website (note that this method does not make the widget fixed to a specific position), follow these steps:



#Step1: Add the Container Element

First, create a container element in the section where you want the widget to appear. This will be the target where the widget will be loaded. Use the following HTML (adjust the styling to match your layout needs):

"helply-widget-target" style="width: 100%; height: 100%; position: relative;"

>



#Step2: Include the script to open the widget by default

Add the script below to listen for the helplyAgentLoaded event and automatically opens the widget once it’s fully loaded.



#Step3: Add data-target-element-id and data-non-closeable attributes to the embed script:

1. data-target-element-id: This attribute should match the ID of the container element where the widget will be displayed (helply-widget-target in this case).

2. data-non-closeable: If you want the widget to be non-closeable, keep this attribute. Remove it if you want users to be able to close the widget.

#Full Example (please replace the data-agent value with the one from the embed code):

"helply-widget-target" style="width: 100%; height: 100%; position: relative;">

  <script>

    window.addEventListener('helplyAgentLoaded', function () {

      if (window.helplyAgentWidget) {

        window.helplyAgentWidget.open();

      }

    });

  script>

  <script

    async

    data-target-element-id="helply-widget-target"

    data-non-closeable

    data-agent="****"

    src="https://helply.com/helply-agent.js"

  >script>



Powered by Helply