Skip to content

Commit

Permalink
chore: Update Documentation
Browse files Browse the repository at this point in the history 
-Update Documentation of Readme
-Update documentation of demo web app
  • Loading branch information
@SkyZeroZx
SkyZeroZx committed Oct 28, 2023
1 parent 118c53e commit 322605d
Show file tree
Hide file tree
Showing 5 changed files with 75 additions and 21 deletions.
37 changes: 27 additions & 10 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,18 @@

Angular component for Facebook Messenger Plugin

Motivation

Ngx Facebook Messenger offers a lightweight alternative, optimizing user experiences by significantly reducing the initial load size, ensuring smoother page performance, and enhancing overall website efficiency
Currently Facebook Messenger Plugin **killed** the core web vitals when load

Aprroach

**Before** of implementation of plugin

![Sample Before](/docs/sample_before.jpg)

- Create a fake button customizable only load the Messenger Plugin when i need
**After**

![Sample After](/docs/sample_after.jpg)

Native for Angular

Expand Down Expand Up @@ -59,12 +64,7 @@ Example of position left in the plugin with botton 36px , and custom background

```scss
#ngx-facebook-messenger {
.wrapper {
bottom: 36px;
right: 0px;
left: 12px;
background: #8278ff;
}
}
```

Expand All @@ -87,6 +87,8 @@ Example of position left in the plugin with bottom 36px , and custom background
}
```

Note : This SCSS code is valid when applied in style base of all proyect , when applied directly in component use !important

# API

# Inputs
Expand Down Expand Up @@ -116,6 +118,11 @@ export interface NgxFacebookMessengerOptions {
* Your required page_id for correctly work of real plugin facebook messenger
*/
page_id: string;
/**
* Optional option for defined language support by facebook plugin (review your language in documentation)
* @default 'en_US'
*/
language?: string;
/**
* Init Plugin Options
*/
Expand All @@ -131,6 +138,16 @@ export interface NgxFacebookMessengerOptions {
* @default 600
*/
debounceTime?: number;
/**
* When the user is logged with your account show a greeting text in the Facebook Plugin Messenger
* @default 'Hello, how can we help you?'
*/
logged_in_greeting?: string;
/**
* When the user not logged with your account show a greeting text in the Facebook Plugin Messenger
* @default 'Hello, how can we help you?'
*/
logged_out_greeting?: string;
};
/**
* Button Options for customization similar to a Facebook Plugin Official
Expand Down Expand Up @@ -202,7 +219,7 @@ export enum SIZE_BUTTON_DESKTOP {
| ---------------- | --------------------------------------------------------------------------------------------------------------------------- |
| xfbmlRender | Emitted when xfmblRender in the DOM |
| customerChatShow | Emitted when the customer Chat Show ( Oficial PLugin Facebook ) |
| customerChatLoad | Emitted when the customer Load , At this point, the plugin is not necessarily mounted in the DOM( Oficial PLugin Facebook ) |
| customerChatLoad | Emitted when the customer Load , At this point, the plugin is not necessarily mounted in the DOM( Oficial PLugin Facebook ) , This output is replace for own implementation of mutation observer detect the Chat Plugin is load and mounted in the DOM |
| customerChatHide | Emitted when the customer chat Hide ( Oficial Plugin Facebook ) |
| dialogShow | Emitted when the customer chat show Dialog ( Oficial Plugin Facebook ) |
| dialogHide | Emitted when the customer chat hide Dialog ( Oficial Plugin Facebook ) |
Expand Down
22 changes: 21 additions & 1 deletion ...demo-ngx-facebook-messenger/src/app/components/documentation/documentation.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,12 @@ <h1 class="text-2xl font-bold mb-4">Inputs</h1>
*/
page_id: string;
/**
* Optional option for defined language support by facebook
* (review your language in documentation)
* @default 'en_US'
*/
language?: string;
/**
* Init Plugin Options
*/
initPluginOptions?: &#123;
Expand All @@ -44,6 +50,18 @@ <h1 class="text-2xl font-bold mb-4">Inputs</h1>
* @default 600
*/
debounceTime?: number;
/**
* When the user is logged with your account show
* a greeting text in the Facebook Plugin Messenger
* @default 'Hello, how can we help you?'
*/
logged_in_greeting?: string;
/**
* When the user not logged with your account show
* a greeting text in the Facebook Plugin Messenger
* @default 'Hello, how can we help you?'
*/
logged_out_greeting?: string;
&#125;;
/**
* Button Options for customization
Expand Down Expand Up @@ -108,7 +126,9 @@ <h1 class="text-2xl font-bold mb-4">Ouput</h1>
<td class="px-4 py-2">customerChatLoad</td>
<td class="px-4 py-2">
Emitted when the customer Load , At this point, the plugin is not
necessarily mounted in the DOM( Oficial PLugin Facebook )
necessarily mounted in the DOM( Oficial PLugin Facebook ) , This
output is replace for own implementation of mutation observer detect
the Chat Plugin is load and mounted in the DOM
</td>
</tr>
<tr>
Expand Down
Binary file added docs/sample_after.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/sample_before.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
37 changes: 27 additions & 10 deletions libs/ngx-facebook-messenger/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,18 @@

Angular component for Facebook Messenger Plugin

Motivation

Ngx Facebook Messenger offers a lightweight alternative, optimizing user experiences by significantly reducing the initial load size, ensuring smoother page performance, and enhancing overall website efficiency
Currently Facebook Messenger Plugin **killed** the core web vitals when load

Aprroach

**Before** of implementation of plugin

![Sample Before](/docs/sample_before.jpg)

- Create a fake button customizable only load the Messenger Plugin when i need
**After**

![Sample After](/docs/sample_after.jpg)

Native for Angular

Expand Down Expand Up @@ -59,12 +64,7 @@ Example of position left in the plugin with botton 36px , and custom background

```scss
#ngx-facebook-messenger {
.wrapper {
bottom: 36px;
right: 0px;
left: 12px;
background: #8278ff;
}
}
```

Expand All @@ -87,6 +87,8 @@ Example of position left in the plugin with bottom 36px , and custom background
}
```

Note : This SCSS code is valid when applied in style base of all proyect , when applied directly in component use !important

# API

# Inputs
Expand Down Expand Up @@ -116,6 +118,11 @@ export interface NgxFacebookMessengerOptions {
* Your required page_id for correctly work of real plugin facebook messenger
*/
page_id: string;
/**
* Optional option for defined language support by facebook plugin (review your language in documentation)
* @default 'en_US'
*/
language?: string;
/**
* Init Plugin Options
*/
Expand All @@ -131,6 +138,16 @@ export interface NgxFacebookMessengerOptions {
* @default 600
*/
debounceTime?: number;
/**
* When the user is logged with your account show a greeting text in the Facebook Plugin Messenger
* @default 'Hello, how can we help you?'
*/
logged_in_greeting?: string;
/**
* When the user not logged with your account show a greeting text in the Facebook Plugin Messenger
* @default 'Hello, how can we help you?'
*/
logged_out_greeting?: string;
};
/**
* Button Options for customization similar to a Facebook Plugin Official
Expand Down Expand Up @@ -202,7 +219,7 @@ export enum SIZE_BUTTON_DESKTOP {
| ---------------- | --------------------------------------------------------------------------------------------------------------------------- |
| xfbmlRender | Emitted when xfmblRender in the DOM |
| customerChatShow | Emitted when the customer Chat Show ( Oficial PLugin Facebook ) |
| customerChatLoad | Emitted when the customer Load , At this point, the plugin is not necessarily mounted in the DOM( Oficial PLugin Facebook ) |
| customerChatLoad | Emitted when the customer Load , At this point, the plugin is not necessarily mounted in the DOM( Oficial PLugin Facebook ) , This output is replace for own implementation of mutation observer detect the Chat Plugin is load and mounted in the DOM |
| customerChatHide | Emitted when the customer chat Hide ( Oficial Plugin Facebook ) |
| dialogShow | Emitted when the customer chat show Dialog ( Oficial Plugin Facebook ) |
| dialogHide | Emitted when the customer chat hide Dialog ( Oficial Plugin Facebook ) |
Expand Down

0 comments on commit 322605d

Please sign in to comment.