ngx-intercom-messenger
Version:
This is an Intercom wrapper for Angular 18+ which supports AoTx
388 lines (377 loc) • 17.7 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, inject, PLATFORM_ID, Injectable, Directive, Input, HostListener, NgModule } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { Intercom, shutdown, update, hide, show, showMessages, showNewMessage, trackEvent, getVisitorId, onShow, onHide, onUnreadCountChange, startTour, showArticle } from '@intercom/messenger-js-sdk';
import { RouterModule } from '@angular/router';
const INTERCOM_MESSENGER_SETTINGS = new InjectionToken('');
/**
* A provider with every Intercom.JS method
*/
class IntercomMessengerService {
platformId = inject(PLATFORM_ID);
settings = inject(INTERCOM_MESSENGER_SETTINGS);
/**
* If you'd like to control when Intercom is loaded, you can use the 'boot' method.
* This is useful in situations like a one-page Javascript based application where the user may not be logged in
* when the page loads. You call this method with the standard intercomSettings object.
*/
boot(settings) {
if (!isPlatformBrowser(this.platformId)) {
return;
}
const app_id = settings?.app_id ?? this.settings?.app_id;
if (!app_id) {
throw new Error('Please provide Intercom app_id either in module config or in the `boot()` method');
}
Intercom(settings ?? this.settings);
}
/**
* If you have the Respond product (combined with another product like Engage)
* you should call the Intercom shutdown method to clear your users’ conversations anytime they log out
* of your application. Otherwise, the cookie we use to track who was most recently logged in on a given device
* or computer will keep these conversations in the Messenger for one week.
* This method will effectively clear out any user data that you have been passing through the JS API.
*/
shutdown() {
return shutdown();
}
/**
* Calling the update method without any other arguments will trigger the JavaScript to look for new messages
* that should be displayed to the current user (the one whose details are in the window.intercomSettings variable)
* and show them if they exist.
*
* Calling the update method with a JSON object of user details will update those fields on the current user
* in addition to logging an impression at the current URL and looking for new messages for the user.
*/
update(data) {
return update(data);
}
/**
* This will hide the main Messenger panel if it is open. It will not hide the Messenger Launcher.
*/
hide() {
return hide();
}
/**
* This will show the Messenger. If there are no conversations it will open with the new message view,
* if there are it will open with the message list.
*
* If a `message` parameter is supplied, it will automatically open a new message window, aliasing showNewMessage().
*
*/
show(message) {
if (message) {
return this.showNewMessage(message);
}
return show();
}
/**
* To open the message window with the message list you can call `showMessages()`.
*/
showMessages() {
return showMessages();
}
/**
* To open the message window with the new message view you can call showNewMessage().
*
* This function takes an optional parameter that can be used to pre-populate the message composer as shown below.
*/
showNewMessage(message) {
return showNewMessage(message ?? '');
}
/**
* You can submit an event using the trackEvent method.
* This will associate the event with the currently logged-in user and send it to Intercom.
* The final parameter is a map that can be used to send optional metadata about the event.
*
* You can also add custom information to events in the form of event metadata.
*/
trackEvent(eventName, metadata) {
return trackEvent(eventName, metadata);
}
/**
* A visitor is someone who goes to your site but does not use the messenger.
* You can track these visitors via the visitor user_id.
* This user_id can be used to retrieve the visitor or lead through the REST API.
*/
getVisitorId() {
return getVisitorId();
}
/**
* Gives you the ability to hook into the show event. Requires a function argument.
*/
onShow(handler) {
return onShow(handler);
}
/**
* Gives you the ability to hook into the hide event. Requires a function argument.
*/
onHide(handler) {
return onHide(handler);
}
/**
* This method allows you to register a function that will be called when the current number of unread messages changes.
*/
onUnreadCountChange(handler) {
return onUnreadCountChange(handler);
}
/**
* If you would like to trigger a tour based on an action a user or visitor takes in your site or application,
* ou can use this API method. You need to call this method with the id of the tour you wish to show. The id of
* the tour can be found in the “Use tour everywhere” section of the tour editor.
*
* Please note that tours shown via this API must be published and the “Use tour everywhere” section must be
* turned on. If you're calling this API using an invalid tour id, nothing will happen.
*/
startTour(tourId) {
return startTour(tourId);
}
/**
* If you would like to trigger an article in the Messenger, you can use the showArticle method.
* The article will be shown within the Messenger, and clicking the Messenger back button will return to the previous context.
* If the Messenger is closed when the method is called, it will be opened first and then the article will be shown.
*/
showArticle(articleId) {
return showArticle(articleId);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: IntercomMessengerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: IntercomMessengerService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: IntercomMessengerService, decorators: [{
type: Injectable
}] });
class IntercomHideDirective {
intercom;
intercomHide;
constructor(intercom) {
this.intercom = intercom;
}
onClick() {
if (this.intercomHide !== false) {
this.intercom.hide();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: IntercomHideDirective, deps: [{ token: IntercomMessengerService }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.9", type: IntercomHideDirective, selector: "[intercomHide]", inputs: { intercomHide: "intercomHide" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: IntercomHideDirective, decorators: [{
type: Directive,
args: [{
selector: '[intercomHide]'
}]
}], ctorParameters: () => [{ type: IntercomMessengerService }], propDecorators: { intercomHide: [{
type: Input
}], onClick: [{
type: HostListener,
args: ['click']
}] } });
class IntercomShowMessagesDirective {
intercom;
intercomShowMessages;
constructor(intercom) {
this.intercom = intercom;
}
onClick() {
if (this.intercomShowMessages !== false) {
this.intercom.showMessages();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: IntercomShowMessagesDirective, deps: [{ token: IntercomMessengerService }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.9", type: IntercomShowMessagesDirective, selector: "[intercomShowMessages]", inputs: { intercomShowMessages: "intercomShowMessages" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: IntercomShowMessagesDirective, decorators: [{
type: Directive,
args: [{
selector: '[intercomShowMessages]'
}]
}], ctorParameters: () => [{ type: IntercomMessengerService }], propDecorators: { intercomShowMessages: [{
type: Input
}], onClick: [{
type: HostListener,
args: ['click']
}] } });
class IntercomShowNewMessageDirective {
intercom;
message;
intercomShowNewMessage;
constructor(intercom) {
this.intercom = intercom;
}
onClick() {
const msg = this.message ? this.message : this.intercomShowNewMessage;
if (msg) {
this.intercom.showNewMessage(this.message);
}
else {
this.intercom.showNewMessage();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: IntercomShowNewMessageDirective, deps: [{ token: IntercomMessengerService }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.9", type: IntercomShowNewMessageDirective, selector: "[intercomShowNewMessage]", inputs: { message: "message", intercomShowNewMessage: "intercomShowNewMessage" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: IntercomShowNewMessageDirective, decorators: [{
type: Directive,
args: [{
selector: '[intercomShowNewMessage]'
}]
}], ctorParameters: () => [{ type: IntercomMessengerService }], propDecorators: { message: [{
type: Input
}], intercomShowNewMessage: [{
type: Input
}], onClick: [{
type: HostListener,
args: ['click']
}] } });
class IntercomShowDirective {
intercom;
message;
intercomShow;
constructor(intercom) {
this.intercom = intercom;
}
onClick() {
const msg = this.message ? this.message : this.intercomShow;
if (msg) {
this.intercom.showNewMessage(this.message);
}
else {
this.intercom.show();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: IntercomShowDirective, deps: [{ token: IntercomMessengerService }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.9", type: IntercomShowDirective, selector: "[intercomShow]", inputs: { message: "message", intercomShow: "intercomShow" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: IntercomShowDirective, decorators: [{
type: Directive,
args: [{
selector: '[intercomShow]'
}]
}], ctorParameters: () => [{ type: IntercomMessengerService }], propDecorators: { message: [{
type: Input
}], intercomShow: [{
type: Input
}], onClick: [{
type: HostListener,
args: ['click']
}] } });
class IntercomShutdownDirective {
intercom;
intercomShutdown = false;
constructor(intercom) {
this.intercom = intercom;
}
onClick() {
if (this.intercomShutdown) {
this.intercom.shutdown();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: IntercomShutdownDirective, deps: [{ token: IntercomMessengerService }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.9", type: IntercomShutdownDirective, selector: "[intercomShutdown]", inputs: { intercomShutdown: "intercomShutdown" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: IntercomShutdownDirective, decorators: [{
type: Directive,
args: [{
selector: '[intercomShutdown]'
}]
}], ctorParameters: () => [{ type: IntercomMessengerService }], propDecorators: { intercomShutdown: [{
type: Input
}], onClick: [{
type: HostListener,
args: ['click']
}] } });
class IntercomTrackEventDirective {
intercom;
event;
intercomTrackEvent;
metadata;
constructor(intercom) {
this.intercom = intercom;
}
onClick() {
const e = this.event ? this.event : this.intercomTrackEvent;
if (e && this.metadata) {
this.intercom.trackEvent(e, this.metadata);
}
else if (e && !this.metadata) {
this.intercom.trackEvent(e);
}
else {
throw new Error('Error in intercomTrackEvent directive: You must specify an event to track.');
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: IntercomTrackEventDirective, deps: [{ token: IntercomMessengerService }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.9", type: IntercomTrackEventDirective, selector: "[intercomTrackEvent]", inputs: { event: "event", intercomTrackEvent: "intercomTrackEvent", metadata: "metadata" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: IntercomTrackEventDirective, decorators: [{
type: Directive,
args: [{
selector: '[intercomTrackEvent]'
}]
}], ctorParameters: () => [{ type: IntercomMessengerService }], propDecorators: { event: [{
type: Input
}], intercomTrackEvent: [{
type: Input
}], metadata: [{
type: Input
}], onClick: [{
type: HostListener,
args: ['click']
}] } });
class IntercomMessengerModule {
static forRoot(config) {
return {
ngModule: IntercomMessengerModule,
providers: [
IntercomMessengerService,
{ provide: INTERCOM_MESSENGER_SETTINGS, useValue: config },
]
};
}
static forFeature() {
return {
ngModule: IntercomMessengerModule,
};
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: IntercomMessengerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: IntercomMessengerModule, declarations: [IntercomHideDirective,
IntercomShowMessagesDirective,
IntercomShowNewMessageDirective,
IntercomShowDirective,
IntercomShutdownDirective,
IntercomTrackEventDirective], imports: [RouterModule], exports: [IntercomHideDirective,
IntercomShowMessagesDirective,
IntercomShowNewMessageDirective,
IntercomShowDirective,
IntercomShutdownDirective,
IntercomTrackEventDirective] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: IntercomMessengerModule, imports: [RouterModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: IntercomMessengerModule, decorators: [{
type: NgModule,
args: [{
imports: [
RouterModule
],
declarations: [
IntercomHideDirective,
IntercomShowMessagesDirective,
IntercomShowNewMessageDirective,
IntercomShowDirective,
IntercomShutdownDirective,
IntercomTrackEventDirective
],
exports: [
IntercomHideDirective,
IntercomShowMessagesDirective,
IntercomShowNewMessageDirective,
IntercomShowDirective,
IntercomShutdownDirective,
IntercomTrackEventDirective
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { INTERCOM_MESSENGER_SETTINGS, IntercomHideDirective, IntercomMessengerModule, IntercomMessengerService, IntercomShowDirective, IntercomShowMessagesDirective, IntercomShowNewMessageDirective, IntercomShutdownDirective, IntercomTrackEventDirective };
//# sourceMappingURL=ngx-intercom-messenger.mjs.map