1. Help Center
  2. Developer Documentation

Widget installation

This document explains the installation steps to add Zeda.io widget to your web app.

Introduction

The Zeda.io widget once installed on your web app will enable your customers to directly submit feedback, feature requests and bugs without having to move anywhere else.

Once submitted, the feedback, feature requests and bugs are visible in your Zeda.io workspace under Backlog, External Portal and linked products so that your team can refer these while planning and defining products and features.

How does the widget help you?

Zeda.io widget will enable your customers to share feedback, feature requests and bugs with your product team directly.

While sharing feedback, your customers can capture screenshots, annotate the capture screenshots and record the screen as well. This will make it extremely easy for your customers to capture workflows, highlight bugs and product suggestions.

Once shared, these requests are visible to your product team inside your Zeda.io workspace so that you can act on those.

Installation steps

To setup the Zeda.io widget on your web app, please follow the below instructions -

Step 1: Configure the widget appearance

Since the widget will be displayed on your web app, you can configure the appearance of this widget as per your website.

To configure the appearance of the widget, navigate to Workspace settings -> Modules -> Widget -> Appearance as shown below and configure

Screenshot 2021-12-30 at 11.47.34 AM

Step 2: Install the widget

To install the widget on your web app, navigate to Workspace settings -> Modules -> Widget -> Installation as shown below and copy the code under installation script

<script>
(function (k) {
  (function (w, d, s, z, e, o) {
    w[z] = {}; w[z]._key = k;
    e = d.createElement(s); e.async = true; e.src = 'https://zeda-widget.s3.ap-south-1.amazonaws.com/dist/widget.bundle.js';
    o = d.getElementsByTagName(s)[0];
    o.parentNode.insertBefore(e, o);
  })(window, document, 'script', 'zeda')
})('XXXXXX-XXXXXX-XXXXXX-XXXXXX')
</script>

This code snippet is different for each workspace so please copy the code which is present in your Zeda.io workspace under Workspace settings -> Modules -> Widget -> Installation.

Step 3: Identify your user and display the widget

When your customers are submitted feedback, feature requests or bugs, it is very important to identify them in Zeda.io otherwise you will not know who raised a particular feature request.

This is a mandatory step and to do this, navigate to Workspace settings -> Modules -> Widget -> Installation as shown below and refer the code under Identify users section

window.zeda.init({ email: <user_email>, name: <user_name> })

This code snippet will pass the name of the user and the email_id to your Zeda.io workspace and display the widget.

Modify this code snippet to pass the relevant information to Zeda.io

Please note that you need to call this identify function only after the installation script is loaded completely.

Step 4: Hide the widget (Optional)

You can optionally hide the widget on specific pages or in specific workflows on your web app. This step is optional and you just need to call the below function to hide the widget when required -

window.zeda.remove();