VueJS Component | AnnounceKit Help Center

Dealing with externally loaded libraries in Javascript apps is a little bit tricky. Firstly, you need to manually load the script, wait until it’s loaded, get the library variable, etc. You can also include the <script> in your main HTML file, but this technique is not quite a good solution.

Knowing all this boring stuff, we have created a VueJS component, which can help you to include AnnounceKit Widget into your app.

Step 1

Firstly, we install the component from NPM
npm install --save announcekit-vue

Step 2

Before adding a component to our VueJS App, we need to get the ID of the widget that we want to include in our app. You can find it in the JavaScript widget config code, as a widget key. In this case, it is https://announcekit.app/widgets/v2/31nbbO

Step 3

As we have our widget ID, it is time to include the component in our VueJS app.

<template> 
<nav>
<li>
 <a href="/home">Home</a>
</li>
<li> 
 <a href="/product">Product</a> 
</li>
<li>
 <a href="#" class="ak-trigger">News
  <AnnounceKit
    catchClick=".ak-trigger"
    widget="https://announcekit.app/widgets/v2/31nbbO" />
    </a>
   </a> 
  </li>
 </ul>
</nav>
</template> 

<script>
import AnnounceKit from "announcekit-vue";
export default { 
 name: "App",
 components: { 
  AnnounceKit 
 } 
}; 
</script>

As you see, we set catchClick property on the component. This will listen for a click event on the specified element. click on that element will trigger the widget to open. This property is not mandatory, but most will be used with Badge and Line widgets.
That’s all!

Here is the properties list that the component accepts. Some of them are very useful.

Property	Description
widget	The url of the widget.You can obtain it while creating or editing widget from Dashboard.
widgetStyle	You can apply CSS rules to modify / tune the position of the widget. Styling docs
catchClick	Element selector to catch clicks and open the widget.
floatWidget	Set true if the widget is a Float widget.
embedWidget	Set true if the widget is a Embed widget.
user	User properties(for user tracking)
data	Segmentation data
onWidgetOpen	Called when the widget is opened.
onWidgetClose	Called when the widget is closed.
onWidgetResize	Called when the widget is resized.
onWidgetUnread	Called when unread post count of widget has been updated.

Please follow our Github repo for further updates.
Resources: