/announcekit-angular

AnnounceKit widget wrapper for angular 4+

Primary LanguageTypeScriptMIT LicenseMIT

The easiest way to use AnnounceKit widgets in your Angular apps (>=10.0.0).

Visit https://announcekit.app to get started with AnnounceKit. CodeSandbox Demo

Documentation

Installation

yarn add announcekit-angular

Usage

app.module.ts

import {AnnouncekitModule} from 'announcekit-angular'

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    AnnouncekitModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<announcekit [user]="user" [data]="data"  widget="https://announcekit.co/widgets/v2/3xdhio">
    What's new
</announcekit>

Props

Common props you may want to specify include:

  • widget - The url of the widget. You can obtain it while creating or editing widget in AnnounceKit Dashboard.
  • widgetStyle - You can apply CSS rules to modify / tune the position of the widget.
  • floatWidget - Set true if the widget is a Float widget.
  • embedWidget - Set true if the widget is a Embed widget.
  • boosters - Set false if you want to disable boosters / Default: true.
  • user - User properties (for user tracking)
  • data - Segmentation data
  • lang - Language selector
  • labels - In case you want to filter and display posts under a specific label or tag.
  • user_token - JWT setup: https://announcekit.app/docs/jwt
  • onWidgetOpen - Called when the widget is opened.
  • onWidgetClose - Called when the widget is closed.
  • onWidgetUnread - Called when unread post count of widget has been updated.
  • onWidgetReady - Called when the widget is ready for the interaction

API

You can use ViewChild to access the widget instance and call control functions

  • open()
  • close()
  • unread()
  • instance()

app.component.html

<announcekit #ankRef [user]="user" [data]="data"  widget="https://announcekit.app/widgets/v2/2TrvK8"></announcekit>
<a @click="() => ankRef.open()">What's New</a>