Table of Contents

Olvy has two main categories of widgets, Announcements and Feedback. Think of both the categories as output and input.

Announcement widgets help you notify your users and keep them updated with all new things you are shipping. They can be release notes widgets or one-off widgets you might add to announce a scheduled maintenance.

Feedback widgets allow you to create in-app feedback prompts. Just integrate the script, and you can prompt your user feedback at any point in your application.

Adding a widget

Let’s look at how to integrate an Olvy widget in your app.

If you're using one of the following frameworks, use the official package to quickly add olvy widgets to your app.

Adding your target element

You might want a button or an icon that says “What’s New” or “Share Feedback” and opens the releases widget and the feedback widget.

First things first, let’s add the element.

Create a button in your app and give it any ID you would like. Here’s a sample button which when clicked will open your widget.

<button id="olvy-whats-new"></button>

We’ve given it an ID of olvy-whats-new, we will use this identifier to automatically open the your widget when the user clicks on this.

Now that the button looks good, let’s make it functional.

Importing and Initialising

You will need to the following script tag to the index.html of your app. If you use React Helmet or Vue Meta you can also add it as via that library’s API.

<script type="text/javascript" src="[<https://app.olvy.co/scriptV2.js>](<https://app.olvy.co/scriptV2.js>)" defer="defer"></script>
<script> var OlvyConfig = { workspaceAlias: "<your-subdomain>", }; </script>

Replace <your-subdomain> with the subdomain of your Olvy workspace. For example if your Olvy releases page is at acme.olvy.co then replace <your-subdomain> with acme

The first tag loads the Olvy script and initialises the OlvyUtils and Olvy variable in your window, so you can globally access these variables.

The second tag creates a global variable called OlvyConfig, when the script in the first tag loads after your page has finished loading, the script checks for an OlvyConfig variable to be available which has the workspace identifier.

If you don’t want to use the OlvyConfig variable you can also initialise Olvy on your page manually by calling

new Olvy("<your-subdomain>");

When you initialize Olvy, or when it automatically initializes using the OlvyConfig variable here is what is does internally.

  1. Fetches all live widgets you have enabled for your workspace
  2. Adds event listeners to your target element which will open the widget on click

💡 In case of SPAs chances are when the script initializes it doesn’t find your target element because it is not rendered by then. In which case it’s better to initialise Olvy manually when your component is finished mounting.

Now we have a button in our app that opens the widget, and the script that opens it. But we haven’t built our widget yet.

Customising your Widget

Olvy's Widget builder provides you with a lot customisation options so that it not only fits your brand identity but also fits your use case completely!

Explore the 2 different widgets Olvy offers -

  • Understanding Announcement Widget Builder
  • Understanding Feedback Widget Builder

Once done, click on Publish to publish the widget and make it live.

You’re done 🎉

Now if you reload your app, the Olvy widget integration should be working.

You can now go back to the widget builder and customize the content it shows and the styles for the widget.