Widget Integration Documentation

This documentation provides guidelines on how to integrate a widget for collecting feedback into various frameworks.

HTML

If you' re not using any framework, you can include the script tag directly in your HTML file:

<script src="https://www.expampl.com/sdk/js?client-id=YOUR_CLIENT_ID" id="scripttagid"></script>
<!-- Add this id, it's crucial for the code to work -->

React.js

To integrate the script tag into a React.js application, you can use the useEffect hook to dynamically add the script tag to the DOM:

import React, { useEffect } from 'react';

const MyComponent: React.FC = () => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://www.expampl.com/sdk/js?client-id=YOUR_CLIENT_ID';
    script.async = true;
    script.id = 'scripttagid'; // <!-- Add this id, it's crucial for the code to work -->
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <div>My React Component</div>;
};

Next.js

In Next.js, you can use the same approach as in React.js:

import React, { useEffect } from 'react';

const MyComponent: React.FC = () => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://www.expampl.com/sdk/js?client-id=YOUR_CLIENT_ID';
    script.async = true;
    script.id = 'scripttagid'; // <!-- Add this id, it's crucial for the code to work -->
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <div>My Next.js Component</div>;
};

Angular.js

In Angular.js, you can achieve this by using ElementRef to directly manipulate the DOM:

import { Component, ElementRef, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: '<div>My Angular.js Component</div>'
})
export class MyComponent implements OnInit, OnDestroy {
  private scriptElement: HTMLScriptElement;

  constructor(private elementRef: ElementRef) {}

  ngOnInit(): void {
    this.scriptElement = document.createElement('script');
    this.scriptElement.src = 'https://www.expampl.com/sdk/js?client-id=YOUR_CLIENT_ID';
    this.scriptElement.async = true;
    this.scriptElement.id = 'scripttagid'; // <!-- Add this id, it's crucial for the code to work -->
    this.elementRef.nativeElement.appendChild(this.scriptElement);
  }

  ngOnDestroy(): void {
    this.elementRef.nativeElement.removeChild(this.scriptElement);
  }
}