4. Front-end integration

You can add Hopara in two different ways to your front-end: Iframes and React components.

Iframes

Iframes are a drop-in solution to add Hopara to your product. When using iframes, Hopara front-end code runs in a sandboxed environment preventing any impact on the rest of the page execution.

The iframe component is available on NPM.

<script src="https://statics.hopara.app/embedded/latest/client.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function(){
    Hopara.init({
        visualizationId: 'my-viz-id',
        accessToken: 'my-hopara-token',
        targetElementId: 'my-target-element',
    })
    });
</script>

Please refer to our sample project on our Github.

React components

Hopara has a React component that you can add to your product just like any other React component. The component is available on NPM.

<div className="HoparaEmbedded">
  <Hopara
    visualizationId="your-viz-id"
    accessToken="your-access-token"
    dataLoaders={dataLoaders}
  />
</div>

Please refer to our sample project on our Github.