erxes Messenger Script Installation

In the case of web messenger, knowledgebase, popups, you have to install some scripts on your website's code. In this section, we will demonstrate all the use-cases related to this topic.

Web messenger

1
Copy messenger code
1

Go to Settings menu => Appstore.

2
Click on the “Appstore” menu (see the below figure).

3
Then choose your messenger and click on the install code button from the right side (see the below figure).

4
Copy the code (see the below figure).” menu (see the below figure).

5
If your website is single page app then you can choose a single-page app and copy the code (see the below figure).” menu (see the below figure).

2
Paste the code in your web source 6. Paste the code in bottom of the body tag (see the below figure).

3
Once you have pasted the code, it will look like this in your web right bottom side (see the below figure).

Pop-Ups

1

Copy pop-ups code

1

Go to Pop-Ups menu from left sidebar (see the below figure).

2
Click on the install code button from the right side (see the below figure).

3

Copy the code (see the below figure).



Important

When you want to set an optional width and height of Popup scaling, it allows 2 flow types namely embedded and pop-ups. Insert code section A and B onto the top of body tag in page of your website.

Important

If your pop-up flow type is "Embedded", then you can choose the code included in section “A” (see the above figure).

Important

If your pop-up flow type is "Popup" then you can choose the code section “B” (see the above figure).

Info

ShoutBox, Dropdown, Slide-in Left, Slide-in Right types are, do not necessary to copy install code.

2
Paste the code in your web source
Paste the code in bottom of the body tag on every page you want Erxes pop-ups to appear (see the below figure).

3
Result
Once you have pasted the code, it will look like this in your web (see the below figure)

Knowledbase

1
Copy knowledgebase code
1
Go to Knowledge Base menu from left sidebar (see the below figure).

2
Choose the option named "Manage Knowledgebase" from dropdown menu (see the below figure).

3
Copy the install code of Knowledge Base (see the below figure).


Important

Do not miss to copy the additional source of section “B” and copy it into top of body tag of the source code.
2
Paste the code in your web source
Paste the code in bottom of body tag on every page you want Erxes knowledge base to appear (see the below figure).

3
Result
Once you have pasted the code, it will look like this in your web (see the below figure).

Google Tag Manager

Basic steps to install scripts.

1
Install google tag manager
1

Log in your google tag manager account.

2
Click on the Admin from the dropdown menu, then choose the 'Install Google Tag Manager' from the right sidebar (see the below figure).

3

Copy the code as high in the head , then paste it onto head tag of every page of your website (see the below figure).

4
Copy the code as high in the body , then paste it onto body tag of every page of your website (see the below figure).

5
Paste the code of google tag manager onto the every page of your website (see the below figure).

2
Web messenger
1
Copy messenger code
1

Go to Settings menu => Appstore.

2
Click on the “Appstore” menu (see the below figure).

3
Then choose your messenger and click on the install code button from the right side (see the below figure).

4
Copy the code of Basic Javascript (see the below figure)

2
Paste the code in google tag manager
1

Log in your google tag manager account.

2
Click the button “Add a new tag” (see the below figure).

3
Click the Tag Configuration => Custom HTML (see the below figure).

4
Paste the messenger code to Tag Configuration (see the below figure).

5
After paste the code, configure to Triggering for All Pages (see the below figure).

3
Result
Once you have pasted the code, it will look like this in your web right bottom side (see the below figure).

3

Pop-Ups

1
Copy pop-ups code
1

Log in your Erxes account.

2

Go to Pop-Ups menu from left sidebar (see the below figure).

3
Click the install code button which you created the Pop Ups (see the below figure).

4
Copy the code (see the below figure).

2

Paste the code in Google Tag Manager

1

Log in your Google Tag Manager account.

2
Click the button “Add a new tag” (see the below figure).

3
Click the Tag Configuration => Custom HTML (see the below figure).

4
Paste the code of Erxes pop-up (see the below figure).

5
After paste the code, configure to Triggering for All Pages (see the below figure).

6

Click SAVE, then SUBMIT and PUBLISH the script in Google Tag Manager.

3
Optional: Set width/height or use embedded flow
1

Go to Pop-Ups menu from left sidebar (see the below figure).

2
Click on the install code button from the right side (see the below figure).

3
Copy the code section A (for 'Embedded') or section B (for 'Popup').

4
Paste the selected code into the body tag of the web page source (see the below figure).

4
Result
Once you have pasted the code, it will look like this on your website (see the below figure).


If you have encountered some mistakes, please make sure following steps:

1

Verify the flow types and that the source code matches your setup.

2

Check that the form ID is correctly set both in Google Tag Manager and in your web source.

3

When you edit the script in Google Tag Manager, always save, then submit, and publish it.

4

Ensure the trigger configuration in Google Tag Manager is correct.

4
Knowledgebase
1
Copy Knowledgebase code
1

Log in to your Erxes account.

2
Go to Knowledge Base menu from left sidebar (see the below figure).

3
Choose the option named "Manage Knowledgebase" from dropdown menu (see the below figure).

4
Copy the install code of Knowledge Base (see the below figure).

2

Paste the code in Google Tag Manager

1

Log in to your Google Tag Manager account.

2
Click the button “Add a new tag” (see the below figure).

3
Click the Tag Configuration => Custom HTML (see the below figure).

4
Paste the code of Erxes Knowledge Base (see the below figure).

5
After paste the code, configure to Triggering for All Pages (see the below figure).

6

Click SAVE, then SUBMIT and PUBLISH the script in Google Tag Manager.

3
Optional: Set width/height or custom position
1
Go to Knowledge Base menu from left sidebar (see the below figure).

2
Choose the option named "Manage Knowledgebase" from dropdown menu (see the below figure).

3
Copy the code (see the below figure).

4
Paste the code onto the top of the body tag in your web page source (see the below figure).

4
Result
Once you have pasted the code, it will look like this on your website (see the below figure).

Erxes script manager

Basic steps to install Erxes scripts.

1
Web Messenger
1
Copy Script Manager code
1

Log in to your Erxes account.

2
Go to Settings menu => Script Manager (see the below figure).

3
Click 'NEW SCRIPT' to create a new script (see the below figure).

4
Insert name and select the messenger that you created (see the below figure).

5
Click on the install code button from the list (see the below figure).

6
Copy the code by clicking 'COPY TO CLIPBOARD' (see the below figure).

2
Paste the code in your website
1
Paste the code into the top of the body tag on every page where you want Erxes Script Manager to appear (see the below figure).

3
Result
Once you have pasted the code, it will look like this on your website's bottom-right corner (see the below figure).

2
Pop-Ups
1

Copy code from Script Manager

1

Log in to your Erxes account.

2
Go to Settings menu => Script Manager.

3
Click 'NEW SCRIPT' to create a new script.

4
Insert a name and select the POP UPS you created.

5
Click the install code button from the list for your created POP UPS (see the below figure).

6
Copy the code (see the below figure).

7

Optional: Customize popup scaling (width/height)

1
Go to Pop-Ups feature, select your created pop-up, and click the install code button from the right side (see the below figure).

2
Copy the code and paste it at the top of the body tag (see the below figure).

3

If your flow type is "Embedded", use the code from section “A” (see the above figure).

4

If your flow type is "Popup", use the code from section “B” (see the above figure).

5

Note: For ShoutBox, Dropdown, Slide-in Left, and Slide-in Right, no install code is needed.

2
Paste the code in your website
1
Paste the code at the bottom of the body tag on every page where you want Erxes Pop-Ups to appear (see the below figure).

3
Result
Once you have pasted the code, it will look like this on your website (see the below figure).

3
Knowledgebase
1

Copy Knowledgebase code from Script Manager

1

Log in to your Erxes account.

2
Go to Settings menu => Script Manager.

3
Click 'NEW SCRIPT' to create a new script.

4
Insert a name and select the KNOWLEDGEBASE TOPIC you previously created (see the below figure).

5
Click the install code button from the list for the created KNOWLEDGEBASE TOPIC (see the below figure).

6
Copy the code (see the below figure).

7

Optional: Customize Knowledgebase scaling (width/height)

1
Go to the Knowledge Base menu from the left sidebar (see the below figure).

2
Choose "Manage Knowledgebase" from the dropdown menu (see the below figure).

3
Copy the code (see the below figure).

4

Paste this code at the top of the body tag in your web page source (see the below figure).

2
Paste the code in your website
1
Paste the script code at the bottom of the body tag on every page where you want the Erxes Script Manager to appear (see the below figure).

3
Result
Once you have pasted the code, it will look like this on your website (see the below figure).

Advanced setup

Advanced steps to install scripts. Erxes let you enable to track all possible customer fields from messenger.

1
Get Data from Your Web App (Logged-in Users)
1
Copy Messenger Install Code
1
Go to Settings menu => Appstore.

2
Select your messenger and click the install code button.

3
Copy the code (see the below figure).

4
For single-page apps, use the SPA code version (see the below figure).

2
Paste the Code into Your Web App
1
Paste the code at the bottom of the body tag (see the below figure).

3

Add Logged-in User Information (Optional)

1

Insert additional fields under `brand_id` in your messenger script.

2
User details will be auto-filled in their profile in Erxes.

3
Custom fields will show under the 'Tracked Data' section.

4
companyData will show under 'Companied' section in upper-right.

5

To track any custom data, just insert it inside the `data` object.

4

Programmatic Control and Button Integration

1

To show messenger on button click, use the following script.

2

Uncheck 'Show launcher' to hide default launcher.

3

You can still call showMessenger() manually after hiding launcher.

5

Messenger Position Customization

To move the messenger to the left side of your screen, use the following custom CSS in your messenger script:

6

CSS Style Overrides

Apply these styles in your parent CSS to modify form appearance.

7
Advanced Installation Combinations
You can combine messenger with pop-ups and/or knowledgebase as follows:
• Messenger + Pop-Ups (or Knowledgebase)
• Messenger + Pop-Ups + Knowledgebase (M+P+K)
• (M+P+K) + Pop-Ups
• (M+P+K) + Knowledgebase
• (M+P+K) + Pop-Ups + Knowledgebase
2
Web Messenger + Pop-Ups (or Knowledgebase)
1
Copy Messenger Code
1

Go to Settings menu => Appstore.

2
Ensure the MESSENGER INTEGRATION brand name matches your created messenger (see the below figure).

2
Connect Pop-Ups or Knowledgebase to Messenger
1
Option A: Web Messenger + Pop-Ups
1
Click the Add button for Pop-Ups to connect it to the messenger.

2
Make sure the Pop-Ups brand name matches your created Pop-Ups.

3
Ensure MESSENGER INTEGRATION brand name matches your messenger (see section A).

2
Option B: Web Messenger + Knowledgebase
1
Click the Add button for Knowledgebase to connect it to the messenger.

2
You can use a different brand name for Messenger and Knowledgebase—they will still work together.

3
Ensure MESSENGER INTEGRATION brand name matches your messenger (see section A).

3
Click on the install code button for Messenger (see the below figure).

4
Copy the Messenger install code.

5
For single-page apps, choose and copy the SPA version of the script.

3
Paste the Code into Your Website
1
Paste the Messenger script at the bottom of the body tag (see the below figure). This step is the same for both Pop-Ups and Knowledgebase integrations.

4
Result
1
Once the script is added, the Messenger + Pop-Ups widget will appear at the bottom-right corner (see the below figure).

2
Messenger + Knowledgebase widget will also appear similarly (see the below figure).

3

Web Messenger + Pop-Ups + Knowledgebase (M+P+K)

1
Copy Messenger Code and Connect Pop-Ups & Knowledgebase
1

Go to Settings menu => Appstore.

2
Ensure the MESSENGER INTEGRATION brand name matches your created messenger (see the below figure).

3
Connect Knowledgebase to Messenger
1
Click the Add button for Knowledge Base to connect it to the messenger.

2
Make sure the MESSENGER INTEGRATION brand name is the same as your created messenger.

4

Connect Pop-Ups to Messenger

1
Click the Add button for Pop-Ups to connect them to the messenger.

2
Ensure the MESSENGER INTEGRATION brand name is the same as your created messenger.

3

Ensure the POP UPS brand name is the same as your created Pop-Ups.

5
Go to Messenger and click the install code button (see the below figure).

6
Copy the Messenger script code.

7
If your site is a Single Page App, use the SPA version of the code.

2
Paste the Code into Your Website
1
Paste the Messenger script code at the bottom of the <body> tag on every page (see the below figure).

3

Result

1

Once the code is installed, the Messenger + Pop-Ups + Knowledgebase widget will appear at the bottom-right corner of your site.



2

Click the "Support" button to trigger the Pop-Up form.

4
(M + P + K) + Pop-Ups
1

Copy Messenger and Pop-Ups Code

1

Follow the base setup from (M+P+K) combination first. [Click here to reference (M+P+K)](URL_TO_MPK_GUIDE)

2

Go to Pop-Ups menu from the left sidebar.

3

Click the install code button from the right side of your created Pop-Up.



4

Copy the Pop-Up code.



5

If using embedded or popup flow type, insert section A or B at the top of the <body> tag.

6

ShoutBox, Dropdown, Slide-in Left/Right types do not require install code.

2
Paste the Code in Your Web Source
1
Paste the Pop-Up code at the bottom of the <body> tag.

3
Result
1
The combined Messenger + Pop-Ups + Knowledgebase widget appears at the bottom-right corner.

5
(M + P + K) + Knowledgebase
1

Copy Messenger and Knowledgebase Code

1

Follow the base setup from (M+P+K) combination first. [Click here to reference (M+P+K)](URL_TO_MPK_GUIDE)

2

Go to Knowledge Base menu from the left sidebar.



3

Choose "Manage Knowledgebase" from the dropdown menu.



4

Copy the code (see the below figure).



5

Insert the additional source from section “B” at the top of the <body> tag.

2
Paste the Code in Your Web Source
1
Paste the Knowledgebase script at the bottom of the <body> tag.

3
Result
1
The Messenger + Pop-Ups + Knowledgebase combo appears in the bottom-right.

6
(M + P + K) + Pop-Ups + Knowledgebase
1

Copy Messenger and Pop-Ups Code

1

Follow the base setup from (M+P+K) combination first. [Click here to reference (M+P+K)](URL_TO_MPK_GUIDE)

2

Go to Pop-Ups menu from the left sidebar.

3

Click on the install code button from the right side.



4

Copy the Pop-Ups code.



5

Insert section A or B into the top of the <body> tag depending on your Pop-Up flow type.

6

Skip install if using ShoutBox, Dropdown, Slide-in Left, or Slide-in Right.

2
Paste the Pop-Ups Code
1
Paste the code at the bottom of the <body> tag.

3

Copy and Insert Knowledgebase Code

1

Go to Knowledge Base => Manage Knowledgebase from the sidebar.



2

Copy the Knowledgebase install code.



3

Insert section “B” of Knowledgebase into the top of the <body> tag.

4
Paste the Knowledgebase Code
1
Paste the code at the bottom of the <body> tag.

5
Result
1
The Messenger + Pop-Ups + Knowledgebase combo will now appear at the bottom-right of your website.

7
Advanced Google tag manager
In the advanced google tag manager installation is described combination of the following features.
• Messenger + Pop-Ups (or Knowledgebase)
• Messenger + Pop-Ups + Knowledgebase (M+P+K)
• (M+P+K) + Pop-Ups
• (M+P+K) + Knowledgebase
• (M+P+K) + Pop-Ups + Knowledgebase

Install google tag manager

1

Log in your google tag manager account.

2
Click on the Admin from the dropdown menu, then choose the "Install Google Tag Manager" from the right sidebar (see the below figure).

3

Copy the code as high in the head , then paste it onto head tag of every page of your website (see the below figure).

4
Copy the code as high in the body , then paste it onto body tag of every page of your website (see the below figure).

5
Paste the code of google tag manager onto the every page of your website (see the below figure).

Web Messenger + Pop-Ups (or Knowledgebase)

This is the script install instruction of Messenger contains Pop-Ups form or Messenger contains Knowledgebase form in Google tag manager. Basic instruction is going through same steps and emphasized steps for difference bewteen Pop-Ups and Knowledbase form in (3 to 6 and 16 to 20).

1
Copy messenger code
1
Go to Settings menu => Appstore.
2
You need to make sure the brand name that you created messenger (see the below figure).

2

Web messenger + Pop-Ups

1

Click the Add button of Pop-Ups in order to connect the messenger.



2

Add Pop Ups (see the below figure).



3

Make sure MESSENGER INTEGRATION brand name is same as your created messenger (see the above figure section A and below figure).



4

Make sure POP UPS brand name is same as your created Pop-Ups (see the above figure section B).

3

Web messenger + Knowledgebase

1

Click the Add button of Knowledge Base in order to connect the messenger.



2

Add knowledge base (see the below figure).



3

Make sure MESSENGER INTEGRATION brand name is same as your created messenger (see the above figure section A and below figure).



4

In this case, different brand name of Messenger and Knowledgebase can be run normal.

4
Copy the Messenger install code
1
Go to Messenger and click on the install code button from the right side (see the below figure).

2
Copy the code (see the below figure).

3
If your website is single page app then you can choose a single-page app and copy the code (see the below figure).

5

Paste the code in Google Tag Manager

1

Log in your google tag manager account.

2

Click the button “Add a new tag” (see the below figure).



3

Click the Tag Configuration => Custom HTML (see the below figure).



4

Paste the code of Erxes pop-up (see the below figure).



5

After paste the code, configure to Triggering for All Pages (see the below figure).



6

When you edit again the script on Google tag manager, you have to click SAVE, then SUBMIT and PUBLISH it.

6
Messenger+Pop-Ups
1
If you want to set an optional width and height of Popup scaling, it allows 2 flow types namely embedded and pop-ups. Follow the below steps.
2
Go to Pop-Ups menu from left sidebar (see the below figure).
3
Click on the install code button from the right side (see the below figure).

4
Copy the code section A or section B.

5
If your pop-up flow type is 'Embedded', then you can choose the code included in section “A” (see the above figure).
6
If your pop-up flow type is 'Popup' then you can choose the code section “B” (see the above figure).
7
ShoutBox, Dropdown, Slide-in Left, Slide-in Right types are, do not necessary to copy install code.
8
Paste code onto the body tag of web page source (see the below figure).

Messenger + Knowledgebase

1
If you want to set an optional width and height of Knowledgebase scaling, follow the below steps. Go to Knowledge Base menu from left sidebar (see the below figure).

2
Then choose the option that named "Manage Knowledgebase" from dropdown menu (see the below figure).

3
Copy the code (see the below figure).

4

Paste the code onto the top of body tag in web page source (see the below figure).

5
Result
Once you have pasted the code, it will look like this in your web right bottom side (see the below figure).
Messenger+Pop-Ups

Messenger+Knowledgebase

Web Messenger + Pop-Ups + Knowledgebase (M+P+K)

1

This is the install instruction of messenger based popup and knowledgebase combination (M+P+K). Next following combinations are expanded to this combination which refers to (M+P+K) + Pop-Ups, (M+P+K)+Knowledgebase and (M+P+K)+Knowledgebase+Pop-Ups.

2
Copy messenger code
1

Go to Settings menu => Appstore.

2
You need to make sure the brand name that you created messenger (see the below figure).

3
Click the Add button of Knowledge Base in order to connect the messenger.

4
Add knowledge base (see the below figure).

5
Make sure MESSENGER INTEGRATION brand name is same as your created messenger (see the above figure section A and below figure).

6
Then you need to connect Pop-Ups. Click the add button of Pop Ups.

7
Add Pop Ups (see the below figure).

8
Make sure MESSENGER INTEGRATION brand name is same as your created messenger (see the above figure section A and below figure).

9

Make sure POP UPS brand name is same as your created Pop-Ups (see the above figure section B).

10
Go to Messenger and click on the install code button from the right side (see the below figure).

11
Copy the code (see the below figure).

12
If your website is single page app then you can choose a single-page app and copy the code (see the below figure).

3

Step 2: Paste the code in google tag manager

1

Log in to your google tag manager account.

2

Click the button “Add a new tag” (see the below figure).



3

Click the Tag Configuration=> Custom HTML (see the below figure).



4

Paste the code (see the below figure).



5

After paste the code, configure to Triggering for All Pages (see the below figure).



6

When you edit again the script on Google tag manager, you have to click SAVE, then SUBMIT and PUBLISH it.

4
If you want to set an optional width and height of Knowledgebase scaling, follow the below steps.
1
Go to Knowledge Base menu from left sidebar (see the below figure).

2
Then choose the option that named "Manage Knowledgebase" from dropdown menu (see the below figure).

3
Copy the code (see the below figure).

4
Paste the code onto the top of body tag in web page source (see the below figure).

5
If you want to set an optional width and height of Popup scaling, it allows 2 flow types namely embedded and pop-ups. Follow the below steps.
1
Go to Pop-Ups menu from left sidebar (see the below figure).
2
Click on the install code button from the right side (see the below figure).

3
Copy the code section A or section B.

4
If your pop-up flow type is "Embedded", then you can choose the code included in section “A” (see the above figure).
5
If your pop-up flow type is "Popup" then you can choose the code section “B” (see the above figure).
6
ShoutBox, Dropdown, Slide-in Left, Slide-in Right types are, do not necessary to copy install code.
7
Paste code onto the body tag of web page source (see the below figure).

6
Step 3: Result
Once you have pasted the code, it will look like this in your web right bottom side (see the below figure).

(M + P + K) + Pop-Ups

1

Copy messenger code

1

In this combination, first you need to follow the instruction of (M+P+K). Click to the link and check reference. (M + P + K)

2

Go to Pop-Ups menu from left sidebar (see the below figure).

3

Click on the install code button from the right side (see the below figure).



4

Copy the code (see the below figure).



5

When you want to set an optional width and height of Popup scaling, it allows 2 flow types namely embedded and pop-ups. Insert code section A and B onto the top of body tag in page of your website.

6

If your pop-up flow type is "Embedded", then you can choose the code included in section “A” (see the above figure).

7

If your pop-up flow type is "Popup" then you can choose the code section “B” (see the above figure).

8

ShoutBox, Dropdown, Slide-in Left, Slide-in Right types are, do not necessary to copy install code.

2
Paste the code in google tag manager
1
Log in your google tag manager account.
2
Click the button “Add a new tag” (see the below figure)

3
Click the Tag Configuration => Custom HTML (see the below figure).

4
Paste the code (see the below figure).

5
After paste the code, configure to Triggering for All Pages (see the below figure).

6
When you edit again the script on Google tag manager, you have to click SAVE, then SUBMIT and PUBLISH it.
7
If you want to set an optional width and height of Popup scaling, it allows 2 flow types namely embedded and pop-ups. Follow the below steps.
8
Go to Pop-Ups menu from left sidebar (see the below figure).
9
Click on the install code button from the right side (see the below figure).

10
Copy the code section A or section B.

11
Paste code onto the body tag of web page source (see the below figure).

3
Result
Once you have pasted the code, it will look like this in your web right bottom side (see the below figure).

(M + P + K) + Knowledgebase

1
Copy messenger code
1
In this combination, first you need to follow the instruction of (M+P+K). Click to the link and check reference. (M + P + K)
2
Go to Knowledge Base menu from left sidebar (see the below figure).

3
Then choose the option that named "Manage Knowledgebase" from the dropdown menu (see the below figure).

4
Copy the code (see the below figure).

5
Do not miss to copy the additional source of section “B” and copy it into top of body tag of the source code.
6
Paste code onto the body tag of web page source (see the below figure).

2
Paste the code in google tag manager
1
Log in your google tag manager account.
2
Click the button “Add a new tag” (see the below figure).

3
Click the Tag Configuration => Custom HTML (see the below figure).

4
Paste the code (see the below figure).

5
After paste the code, configure to Triggering for All Pages (see the below figure).

3
Result
Once you have pasted the code, it will look like this in your web right bottom side (see the below figure).

(M + P + K) + Pop-Ups + knowledgebase

1

Copy messenger code

1

In this combination, first you need to follow the instruction of (M+P+K). Click to the link and check reference. (M + P + K)

2

Go to Pop-Ups menu from left sidebar (see the below figure).

3

Click on the install code button from the right side (see the below figure).



4

Copy the code (see the below figure).



5

When you want to set an optional width and height of Popup scaling, it allows 2 flow types namely embedded and pop-ups. Insert code section A and B onto the top of body tag in page of your website.

6

If your pop-up flow type is "Embedded", then you can choose the code included in section “A” (see the above figure).

7

If your pop-up flow type is "Popup" then you can choose the code section “B” (see the above figure).

8

ShoutBox, Dropdown, Slide-in Left, Slide-in Right types are, do not necessary to copy install code.

2
Paste the code in google tag manager
1
Log in your google tag manager account.
2
Click the button “Add a new tag” (see the below figure)

3
Click the Tag Configuration => Custom HTML (see the below figure).

4
Paste the code (see the below figure).

5
After paste the code, configure to Triggering for All Pages (see the below figure).

6
When you edit again the script on Google tag manager, you have to click SAVE, then SUBMIT and PUBLISH it.
7
If you want to set an optional width and height of Popup scaling, it allows 2 flow types namely embedded and pop-ups. Follow the below steps.
8
Go to Pop-Ups menu from left sidebar (see the below figure).
9
Click on the install code button from the right side (see the below figure).

10
Copy the code section A or section B.

11
Paste code onto the body tag of web page source (see the below figure).

3

Copy the code of Knowledgebase

1

Go to Knowledge Base menu from left sidebar (see the below figure).



2

Then choose the option that named "Manage Knowledgebase" from the dropdown menu (see the below figure).



3

Copy the code (see the below figure).



4

Do not miss to copy the additional source of section “B” and copy it into top of body tag of the source code.

4
Paste the code in google tag manager
1
Log in your google tag manager account.
2
Click the button “Add a new tag” (see the below figure).

3
Click the Tag Configuration => Custom HTML (see the below figure).

4
Paste the code (see the below figure).

5
After paste the code, configure to Triggering for All Pages (see the below figure).

5
Result
Once you have pasted the code, it will look like this in your web right bottom side (see the below figure).

6
Advanced Erxes script manager
In the advanced Erxes script manager installation instruction is described combination of the following features.
• Messenger + Pop-Ups (or Knowledgebase)
• Messenger + Pop-Ups + Knowledgebase (M+P+K)
• (M+P+K) + Pop-Ups
• (M+P+K) + Knowledgebase
• (M+P+K) + Pop-Ups + Knowledgebase

Web messenger + Pop‑Ups (or Knowledgebase)

This is the script install instruction of Messenger contains Pop-Ups form or Messenger contains Knowledgebase form in Erxes script manager.

1

Create a messenger contains Pop‑Ups or messenger contains knowledgebase.

1

Go to Advanced combination installation => Web messenger + Pop‑Ups (or Knowledgebase).

Advanced combination installation

2

Then follow steps number from 1 to 6 of the instruction for Web messenger + Pop‑Ups (or Knowledgebase).

2

Copy script and paste the code

1

After that, follow the instruction of Erxes script manager => Web messenger. The messenger, you have to select which you created messenger. Erxes script installation

3
Result. Once you have pasted the code, it will look like this in your web right bottom side (see the below figure).
Messenger+Pop‑Ups

Messenger+Knowledgebase

Web messenger + Pop‑Ups + Knowledgebase (M+P+K)

This is the install instruction of messenger based popup and knowledgebase combination (M+P+K). Next following combinations are expanded to this combination which refers to (M+P+K) + Pop-Ups, (M+P+K)+Knowledgebase and (M+P+K)+Knowledgebase+Pop-Ups.

1

Create a messenger contains both Pop‑Ups and Knowledgebase.

1

Go to Advanced combination installation => Web messenger + Pop‑Ups + Knowledgebase. Advanced combination installation

2

Then follow steps number from 1 to 9 of the instruction for Web messenger + Pop‑Ups + Knowledgebase.

2

Copy script and paste the code

After that, follow the instruction of Erxes script manager => Web messenger. The messenger, you have to select which you created messenger. Erxes script Installation

3
Result. Once you have pasted the code, it will look like this in your web right bottom side. Click to FAQ to see Pop‑Ups form.

(M + P + K) + Pop‑Ups (or Knowledgebase)

1
Copy messenger code
1

In this combination, first you need to follow the Erxes script instruction of (M+P+K). Click to the link and check reference. Erxes Script (M + P + K)

2
Go to Settings menu => Script manager (see the below figure).

3
Create new script to click NEW SCRIPT (see the below figure).

4
Messenger+ Pop‑Ups: Insert name and select the messenger that you created, then select your created Pop‑Ups (see the below figure).

5
Messenger+ Knowledgebase: Insert name and select the messenger that you created, then select your created Knowledgebase (see the below figure).

6
Click on the install code button from the list (see the below figure).

7
Copy the code that you created the messenger by clicking COPY TO CLIPBOARD (see the below figure).

2
Paste the code in your web source
1
Paste the code in the bottom of the body tag (see the below figure).

3
Result. Once you have pasted the code, it will look like this in your web right bottom side (see the below figure).
Messenger+Pop‑Ups

Messenger+knowledgebase

(M + P + K) + Pop‑Ups + Knowledgebase

1
Copy messenger code
1

In this combination, first you need to follow the Erxes script instruction of (M+P+K). Click to the link and check reference. Erxes Script (M + P + K)

2
Go to Settings menu => Script manager (see the below figure).

3
Create new script to click NEW SCRIPT (see the below figure).

4
Insert name and select the Messenger, Pop‑Ups and Knowledgebase that you created (see the below figure).

5
Click on the install code button from the list (see the below figure).

6
Copy the code that you created the messenger by clicking COPY TO CLIPBOARD (see the below figure).

When you want to set an optional width and height of Popup scaling, it allows 2 flow types namely embedded and pop-ups. Insert code section A and B onto the top of body tag in page of your website.
• If your pop-up flow type is "Embedded", then you can choose the code included in section “A” (see the above figure).
• If your pop-up flow type is "Popup" then you can choose the code section “B” (see the above figure).
• ShoutBox, Dropdown, Slide-in Left, Slide-in Right types are, do not necessary to copy install code.
2
Paste the code in your web source
1
Paste the code in the bottom of the body tag (see the below figure).

Google Tag Manager Troubleshooting guide

If you have any problems with when installing Google Tag Manager script on specified pages, there are a few troubleshooting steps you can take to check things are set up correctly. This instruction covers the case that all web pages contain the messenger and only some specified page contains pop-up script. Therefore, it is possible to work on other cases, just change the erxes scripts. Following instruction shows how to arrange the erxes scripts on your web pages.

In order to install two script codes on your page, you need to set some triggers on Google tag manager html code.

1
Configure trigger on Messenger script:
1

Add trigger on messenger script code in html which you have already configured in Google tag manager.

2
Configure a trigger that messenger does not contains your specified page. In this case, messenger script would be configured on another tag. It is referred to next paragraph for Configure trigger on Messenger + Pop‑Up script.
• Trigger Type: Page View
• This trigger fires on: Some page Views
• Fire this trigger condition should be: Page URL does not contain your specified page such as (index/index/category/printers (See the following figure)

3
Then go to tags and selects the trigger that you configured. (See the following figure)

2
Configure trigger on Messenger + Pop‑Up script:
While messenger script does not contain specified page as above case, you need to configure messenger script with Pop-Ups script. Figure out the following steps.
1
For google tag manager code, you have to paste scripts of both Messenger and Pop‑Ups code. (See the following figure)

2
Add trigger on the html code. The code trigger condition contains your specified page.
• Trigger Type: Page View
• This trigger fires on: Some page Views
• Fire this trigger condition should be: Page URL contains your specified page such as (index/index/category/printers) (See the following figure).

3
Then go to tags and selects the trigger that you configured (See the following figure).

4
See the figure for Google tag script with trigger configuration.