Skip to content
Gamification SaaS Docs

About Components

Our components are implemented using Web Components. This means they will work across all frameworks (Vue.js, React, Svelte), as well as in regular html files.

Your browser ships with default components such as div, span and video. Our components work in the same way. As soon as the Client SDK is loaded these components become available to be used globally within your site.

It’s as simple as

<html>
    <head>
        <script src="integration.js" />
    </head>


    <body>
        <gf-usage-graph />
    </body>
</html>

Styling

Section titled “Styling”

Styles from your site’s CSS will not be applied to our components by default, since they are encapsulated using Shadow DOM. This will prevent components from appearing broken and allow a consistent clean experience for your users. To allow you to still modify styles CSS variables defined on your site are still accessible inside the components, and can be used to customize their appearance.