Using Vue.js In-App Inbox Component

To add engagespot notification center UI component to your Vue.js application, you should use our esm module.

Quick Setup

You can install the package from npm or from the CDN.

npm

npm install @engagespot/client

yarn

yarn add @engagespot/client

pnpm

pnpm install @engagespot/client

Then import the render function and use that to render the notification center.

<template>
  <div ref="bellIcon">Notifications</div>
</template>

<script type="module">
import { render } from "@engagespot/client";

export default {
  name: "Notifications",
  mounted: function () {
    const options = {
      apiKey: "ENGAGESPOT_API_KEY",
      userId: "YOUR_USERS_ID",
      dataRegion: "us" //us or eu based on your workspace data region
    };
    render(this.$refs.bellIcon, options);
  },
};
</script>

You can find your ENGAGESPOT_API_KEY from your Engagespot Console. As explained in the basic concepts chapter, userId should be any value to uniquely identify your app's users. It can be their email id, or UUID or a numerical id from your database.