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

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):

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

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.

<script>
  window.addEventListener('helplyAgentLoaded', function () {
    if (window.helplyAgentWidget) {
      window.helplyAgentWidget.open();
    }
  });
</script>

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.

<script
  async
  data-target-element-id="helply-widget-target"
  data-non-closeable
  data-agent="****"
  src="https://helply.com/helply-agent.js"
></script>

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

<div id="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>
</div>