Installing the widget

You can embed the Happi widget into your website or web app to allow customers to reach out easily.

You can customise the colours and most of the text within the widget to your liking by passing in options.

Using on any webpage

Copy the support widget code from your Widget settings, this is where you will find your publishable key. It should look like the snippet below:

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/happi-widget/dist/index.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://unpkg.com/happi-widget/dist/index.css" />
<script type="text/javascript">
  Happi.init({
    publishableKey: "my-publishable-key"
  })
</script>

That’s it, your widget is now installed and should automatically load on your site. If you have users who login to your website or app, you might want to prefill their customer data to save them time and avoid errors.

Using with Gatsby/Next.js/React etc

First you need to install the `happi-widget` package.

npm i --save happi-widget
// or if you use yarn...
yarn add happi-widget

import Happi from "happi-widget"
import "happi-widget/dist/index.css"

Happi.init({
  publishableKey: "my-publishable-key"
})