feat: Add lazy and theme_color how configurable parameters

-Add theme_color in NgxFacebookMessengerOptions how configurable option for plugin facebook
-Add lazy how option for load on demand the plugin if is necesary

libs/ngx-facebook-messenger/src/lib/constant/customer-chat.constant.ts

@@ -1,32 +1,31 @@
 export enum CUSTOMER_CHAT {
- SHOW = 'customerchat.show',
- HIDE = 'customerchat.hide',
- LOAD = 'customerchat.load',
- DIALOG_SHOW = 'customerchat.dialogShow',
- DIALOG_HIDE = 'customerchat.dialogHide'
+ SHOW = 'customerchat.show',
+ HIDE = 'customerchat.hide',
+ LOAD = 'customerchat.load',
+ DIALOG_SHOW = 'customerchat.dialogShow',
+ DIALOG_HIDE = 'customerchat.dialogHide',
 }
 
 export enum VIEW_BUTTON {
- ICON = 'ICON',
- ICON_TEXT = 'ICON_TEXT',
- TEXT = 'TEXT'
+ ICON = 'ICON',
+ ICON_TEXT = 'ICON_TEXT',
+ TEXT = 'TEXT',
 }
 
 export enum STYLE_BUTTON {
- ROUNDED_LOGO = 'ROUNDED_LOGO',
- ROUNDED = 'ROUNDED',
- SQUARED = 'SQUARED'
+ ROUNDED_LOGO = 'ROUNDED_LOGO',
+ ROUNDED = 'ROUNDED',
+ SQUARED = 'SQUARED',
 }
 
 export enum SIZE_BUTTON_MOBILE {
- STANDARD = 'STANDARD_MOBILE',
- COMPACT = 'COMPACT_MOBILE'
+ STANDARD = 'STANDARD_MOBILE',
+ COMPACT = 'COMPACT_MOBILE',
 }
 
 export enum SIZE_BUTTON_DESKTOP {
- STANDARD = 'STANDARD_DESKTOP',
- COMPACT = 'COMPACT_DESKTOP'
+ STANDARD = 'STANDARD_DESKTOP',
+ COMPACT = 'COMPACT_DESKTOP',
 }
 
-
-export const DEFAULT_GREETING = 'Hello, how can we help you?';
+export const DEFAULT_GREETING = 'Hello, how can we help you?';

libs/ngx-facebook-messenger/src/lib/ngx-facebook-messenger.component.html

@@ -5,6 +5,7 @@
  alt="Facebook Messenger Chat"
  (click)="loadPlugin()"
  role="button"
+ *ngIf="isLazy"
 >
  <div class="centered-container">
  <ng-container *ngIf="viewButton === 'ICON_TEXT' || viewButton === 'TEXT'">

libs/ngx-facebook-messenger/src/lib/ngx-facebook-messenger.component.ts

@@ -22,8 +22,11 @@ import {
  STYLE_BUTTON,
  VIEW_BUTTON,
 } from './constant';
-import { NgxFacebookMessengerOptions } from './types';
-import { FacebookStatic, InitParams } from './types/facebook.interface';
+import {
+ FacebookStatic,
+ InitParams,
+ NgxFacebookMessengerOptions,
+} from './types';
 import { Observable } from 'rxjs';
 
 // eslint-disable-next-line no-var
@@ -75,6 +78,9 @@ export class NgxFacebookMessengerComponent implements OnInit, OnChanges {
 
  protected classButton = '';
 
+ // flag for detect if load lazy or not the oficial plugin
+ protected isLazy!: boolean;
+
  constructor(
  @Inject(PLATFORM_ID) private platformId: object,
  @Inject(DOCUMENT) private readonly document: Document,
@@ -114,6 +120,19 @@ export class NgxFacebookMessengerComponent implements OnInit, OnChanges {
  this.validateRequired();
  this.buildTextButton();
  this.buildClassButton();
+ this.eagerLoadPlugin();
+ }
+
+ /**
+ * Checks if the plugin should be loaded lazily and if not, it loads the
+ * plugin and hides the NgxFacebookMessenger.
+ */
+ private eagerLoadPlugin() {
+ this.isLazy =
+ this.ngxFacebookMessengerOptions.initPluginOptions?.lazy ?? true;
+ if (!this.isLazy) {
+ this.initPlugin();
+ }
  }
 
  private validateRequired() {
@@ -133,6 +152,7 @@ export class NgxFacebookMessengerComponent implements OnInit, OnChanges {
  loadPlugin() {
  if (!this.isLoaded && isPlatformBrowser(this.platformId)) {
  this.isLoaded = true;
+ this.addLoader();
  this.initPlugin();
  }
  }
@@ -180,13 +200,19 @@ export class NgxFacebookMessengerComponent implements OnInit, OnChanges {
  * for the plugin, injecting the Facebook SDK asynchronously, and initializing the Facebook SDK.
  */
  private initPlugin() {
- this.elementRef = this.ngxFacebookMessenger.nativeElement as HTMLElement;
- this.elementRef.classList.add('active');
  this.createDivPlugin();
  this.injectFbSdkAsync();
  this.fbAsyncInit();
  }
 
+ /**
+ * Add the 'active' class to the ngxFacebookMessenger element to show loading action
+ */
+ private addLoader() {
+ this.elementRef = this.ngxFacebookMessenger.nativeElement as HTMLElement;
+ this.elementRef.classList.add('active');
+ }
+
  /**
  * The function `fbAsyncInit` initializes the Facebook SDK asynchronously and subscribes to Facebook
  * events.
@@ -232,18 +258,26 @@ export class NgxFacebookMessengerComponent implements OnInit, OnChanges {
  }
 
  hideNgxFacebookMessenger() {
- const debounceTime =
- this.ngxFacebookMessengerOptions?.initPluginOptions?.debounceTime ?? 600;
-
- setTimeout(() => {
- this.renderer2.setStyle(this.elementRef, 'display', 'none');
-
- // Default is true
- const showDialog =
- this.ngxFacebookMessengerOptions.initPluginOptions?.showDialog || true;
+ // only hide when is lazy , not show when is eager load plugin oficial facebook
+ if (this.isLazy) {
+ const debounceTime =
+ this.ngxFacebookMessengerOptions?.initPluginOptions?.debounceTime ??
+ 600;
+
+ setTimeout(() => {
+ this.setDisplayNone();
+ // Default is true
+ const showDialog =
+ this.ngxFacebookMessengerOptions.initPluginOptions?.showDialog ??
+ true;
+
+ this.pluginChatShow(showDialog);
+ }, debounceTime);
+ }
+ }
 
-  this.pluginChatShow(showDialog);
- }, debounceTime);
+ private setDisplayNone() {
+ this.renderer2.setStyle(this.elementRef, 'display', 'none');
  }
 
  /**
@@ -275,23 +309,31 @@ export class NgxFacebookMessengerComponent implements OnInit, OnChanges {
  const fbCustomerChat = this.document.createElement('div');
  fbCustomerChat.id = 'fb-customer-chat';
  fbCustomerChat.classList.add('fb-customerchat');
+
+ // Configure attribute in HTML
+ // See https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin/customization
+
  fbCustomerChat.setAttribute(
  'page_id',
  this.ngxFacebookMessengerOptions.page_id
  );
 
  fbCustomerChat.setAttribute('attribution', 'biz_inbox');
 
+ const pluginOptions = this.ngxFacebookMessengerOptions?.initPluginOptions;
+
  fbCustomerChat.setAttribute(
  'logged_in_greeting',
- this.ngxFacebookMessengerOptions?.initPluginOptions?.logged_in_greeting ||
- DEFAULT_GREETING
+ pluginOptions?.logged_in_greeting || DEFAULT_GREETING
  );
 
+ if (pluginOptions?.theme_color) {
+ fbCustomerChat.setAttribute('theme_color', pluginOptions?.theme_color);
+ }
+
  fbCustomerChat.setAttribute(
  'logged_out_greeting',
- this.ngxFacebookMessengerOptions?.initPluginOptions
- ?.logged_out_greeting || DEFAULT_GREETING
+ pluginOptions?.logged_out_greeting || DEFAULT_GREETING
  );
 
  bodyElement.appendChild(fbRootElement);

libs/ngx-facebook-messenger/src/lib/types/index.ts

@@ -1 +1,2 @@
+export * from './facebook.interface';
 export * from './ngx-facebook-messenger.interface';

libs/ngx-facebook-messenger/src/lib/types/ngx-facebook-messenger.interface.ts

@@ -19,6 +19,12 @@ export interface NgxFacebookMessengerOptions {
  * Init Plugin Options
  */
  initPluginOptions?: {
+ /**
+ * Init plugin by default Facebook Messenger Oficial lazy ( when click in the fake button )
+ * when is false init eager ( possible killed your web vitals )
+ * @default true
+ */
+ lazy?: boolean;
  /**
  * If required showDialog
  * @default true
@@ -30,6 +36,13 @@ export interface NgxFacebookMessengerOptions {
  * @default 600
  */
  debounceTime?: number;
+ /**
+ * Property of attribute for theme_color color in oficial Facebook Plugin Messenger
+ * Default take your configuration setting in Facebook Account
+ * If not it's configure take blue default color
+ * @default null
+ */
+ theme_color?: string;
  /**
  * When the user is logged with your account show a greeting text in the Facebook Plugin Messenger
  * @default 'Hello, how can we help you?'