Integrate Hoory with Next.js

There are two different ways to handle Hoory integration with Next.js. You can either use the React.js integration or use the script tag integration.

React.js Integration package

If you want to use the React.js integration, you can follow the steps below. To integrate Hoory with your react.js application, you can install the hoory package from npm.

npm install @hoory/react

then you can import the package and use it in your application.

import React from 'react';
import { useHoory } from '@hoory/react';

export default function App() {
  const API = useHoory('WEBSITE_TOKEN');
  return (
    <div className="App">
      <button onClick={() => API.toggle() }>Toggle</button>
    </div>
  );
}

Full documentation is available at https://reactjs.hoory.com

Self Tag Integration

To integrate Hoory with your Next.js application, you would need a component that loads the Hoory script.

You can do this in two quick steps. Let us illustrate this with the help of an example below. This example shows a React component which loads the Hoory script asynchronously.

1. Copy and Create!

Copy the following code and create a file in your components folder with the name HooryWidget.js.

import React, { useEffect } from 'react';

const HooryWidget = () => {
  useEffect(() => {
    // Add Hoory Settings
    window.hoorySettings = {
      hideMessageBubble: false,
      position: 'right', // This can be left or right
      locale: 'en', // Language to be set
      type: 'standard', // [standard, expanded_bubble]
    };

    // Paste the script from inbox settings except the <script> tag
    (function(d,t) {
      var BASE_URL="<your-installation-url>";
      var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
      g.src=BASE_URL+"/packs/js/sdk.js";
      s.parentNode.insertBefore(g,s);
      g.async=!0;
      g.onload=function(){
        window.hoorySDK.run({
          websiteToken: '<your-website-token>',
          baseUrl: BASE_URL
        })
      }
    })(document,"script");
  }, []);

  return null;
}

export default HooryWidget

2. Import

Import the component in your pages or layout component as shown below.

import React from 'react'
// ...

import HooryWidget from '../components/HooryWidget'

const Page = () => (
  <>
    <HooryWidget />
    <OtherComponents >
  </>
)

export default Page;

You would be able to see the Hoory widget on the page now.