Integrating with React

Olvy provides a general purpose script for you to integrate Olvy's widgets in your apps. The script is written in Vanilla JS, and works out of the box in every browser.

The script is written with the browser / the client in the mind, and does not work on the server side due its dependence on JavaScript document and window objects.

To integrate an Olvy widget in your application you will need to do the following:

Import the Olvy script to your application.

You will need to add the script to the page you want to display your release notes widget on. Usually, our customers have their "What's New" widget added in their app layouts so it is available on every screen their users are on.

To do it, you will need to add the script tag to the index.html template in your React app.

Add the following code snippet to your application.

<script type='text/javascript'src='https://app.olvy.co/script.js'defer='defer'></script>

You can also use React Helmet to add the script from inside your React components.

Add the "What's New" Button

Next up, add the "What's New" button in your application wherever you want the button to be displayed.

Here is a simple div you can use:

<button id="olvy-target">
  What's New
</button>

Now that you've added the trigger element to your app, we will need to initialise the Olvy script.

Initialize Olvy

We will have to use the useEffect() hook in the component you added your "What's New" button in. In the useEffect hook you will need to call the window.Olvy.init(config) function.

And in the cleanup() for the useEffect hook, you will need to call the window.Olvy.teardown() function.

For example, here:

import React, { useEffect } from "react";
function WhatsNew() {
  useEffect(() => {
	if (window.Olvy) {
        window.Olvy.init({
          organisation: "<your_olvy_subdomain>",
          target: "#olvy-target",
          type: "modal",
          view: {
            showSearch: false,
            compact: false,
            showHeader: true,
            showUnreadIndicator: true,
            unreadIndicatorColor: "#cc1919",
            unreadIndicatorPosition: "top-right",
          },
        });
    }
    return function cleanup() {
      if (window.Olvy) {
		window.Olvy.teardown();
      }
    };
  });
  return (
    <div>
      <button id="olvy-target">What's New</button>
    </div>
  );
}

The object passed to the init function is Olvy's config. The organisation key (which has the value  <your_olvy_subdomain> ) replace the value for it with your Olvy sub domain.

If your release notes are hosted on acme.olvy.co, and then the value for the organisation key in the config will be acme

The target key is the selector for the "What's New" button on your page.

The script uses the window and document APIs the browser provides, so it will only work on the client side. Make sure to handle the cases if you're using server side rendering.

That's it. That's how you can integrate Olvy in your React app. If you face any issues while integrating feel free to reach out to us on [email protected] and we will help you integrate Olvy into your application.