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.


Quick installation

Basic steps to install scripts.

Web messenger

Step 1: Copy messenger code

  1. Go to Settings menu => Appstore.
  2. Click on the “Appstore” menu (see the below figure).

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

  1. Copy the code (see the below figure).

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

Step 2: Paste the code in your web source

  1. Paste the code in bottom of the body tag (see the below figure).

Step 3: Result

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

Pop-Ups

Step 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).

  1. Copy the code (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.

Step 2: Paste the code in your web source

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

Step3: Result

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

Knowledgebase

Step 1: Copy knowledgebase code

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

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

  1. Copy the code (see the below figure).

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

Step 2: Paste the code in your web source

  1. Paste the code in bottom of body tag on every page you want Erxes knowledge base to appear (see the below figure).

Step3: Result

  1. 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.

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).

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

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

Web messenger

Step 1: Copy messenger code

  1. Go to Settings menu => Appstore.
  2. Click on the “Appstore” menu (see the below figure).

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

  1. Copy the code of Basic Javascript (see the below figure).

Step 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).

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

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

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

Step 3: Result

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

Pop-Ups

Step 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).

  1. Copy the code (see the below figure).

Step 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).

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

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

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

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

  2. 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.

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

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

  1. Copy the code section A or section B.

  • 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.

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

Step3: Result

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

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

  1. Verify the flow types and the additional source is right.
  2. Check the form id on Google tag manager and verify the form id on the web source.
  3. When you edit again the script on Google tag manager, make sure to save it and then submit and publish it.
  4. Make sure to configure the trigger in Google tag manager correctly.

Knowledgebase

Step 1: Copy knowledgebase code

  1. Log in to your erxes account
  2. Go to Knowledge Base menu from left sidebar (see the below figure).

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

  1. Copy the install code of knowledge base (see the below figure).

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).

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

  1. Paste the code of Erxes knowledge base code (see the below figure).

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

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

  2. If you want to set an optional width and height of Knowledgebase scaling, follow the below steps.

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

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

  1. Copy the code (see the below figure).

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

Step3: Result

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

Erxes script manager

Basic steps to install Erxes scripts.

Web messenger

Step 1: Copy Script manager code

  1. Log in your erxes account.
  2. Go to Settings menu => Script manager (see the below figure).

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

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

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

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

Step 2: Paste the code onto your script manager

  1. Paste the code the top of body tag on every page you want Erxes script manager to appear (see the below figure).

Step 3: Result

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

Pop-Ups

Step 1: Copy code of Script manager

  1. Log in your erxes account.
  2. Go to Settings menu => Script manager.

  1. Create new script to click NEW SCRIPT.

  1. Insert name and select the POP UPS that you created.

  1. Click on the install code button which you created POP UPS from the list (see the below figure).

  1. Copy the code (see the below figure).

  1. If you want to set an optional width and height of Popup scaling, it allows 2 flow types namely embedded and pop-ups. Go to Pop-ups feature, then select your created pop-ups and click on the install code button from the right side (see the below figure).

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

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

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

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

Step 2: Paste the code onto your script manager

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

Step3: Result

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

Knowledgebase

Step 1: Copy knowledgebase code of Script manager

  1. Log in to your erxes account.

  2. Go to Settings menu => Script manager.

  1. Create new script to click NEW SCRIPT.

  1. Insert name and select the KNOWLEDGEBASE TOPIC that you was created before (see the below figure).

  1. Click on the install code button which you created KNOWLEDGEBASE TOPIC from the list (see the below figure).

  1. Copy the code (see the below figure).

  1. If you want to set an optional width and height of Knowledgebase scaling, follow the below steps.

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

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

  1. Copy the code (see the below figure).

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

Step 2: Paste the code onto your script manager

  1. Paste the script code the bottom of body tag on every page that you want Erxes script manager to appear (see the below figure).

Step3: Result

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


Advanced setup

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

Get data from your web app (for logged-in users)

Step 1:Copy messenger install code.

  1. Go to Settings menu => Appstore.
  2. Click on the “Appstore” menu (see the below figure).

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

  1. Copy the code (see the below figure).

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

Step 2: Paste the code in the bottom of the body tag (see the below figure).

Step 3: If you want to get user information automatically, you can insert additional field under brand_id in your messenger script. Insert the messenger script in your web body section. :

<script>
window.erxesSettings = {
messenger: {
brand_id: "sNbKdZ",
phone: '88833331111',
data: {
avatar: 'https://cdn1.iconfinder.com/data/icons/female-avatars-vol-1/256/female-portrait-avatar-profile-woman-sexy-afro-2-512.png',
firstName: 'firstName1111',
lastName: 'lastName1111',
birthDate: new Date('2020-01-01'),
sex: 1,
emailValidationStatus: 'valid',
position: 'position',
department: 'department',
leadStatus: 'working',
hasAuthority: 'Yes',
description: 'bio',
doNotDisturb: 'Yes',
code: 'id',
'links.linkedIn': 'http://linkedin.com/test',
'links.twitter': 'http://twitter.com/test',
'links.facebook': 'http://facebook.com/test',
'links.github': 'http://github.com/test',
'links.youtube': 'http://youtube.com/test',
'links.website': 'http://website.com/test',
// custom fields ===========
// createdAt is reserved field
updatePlan: new Date('2020-04-25'),
plan: 'paid',
},
companyData: {
name: 'name',
'links.website': 'http://website.com',
},
},
};
(function() {
var script = document.createElement('script');
script.src = "http://localhost:3200/build/messengerWidget.bundle.js";
script.async = true;
var entry = document.getElementsByTagName('script')[0];
entry.parentNode.insertBefore(script, entry);
})();
</script>

Step 4: As you can see the user details, all value will be automatically displayed on each field on user profile.

Step 5: Check the custom fields value, it is shown on Tracked data field on left down side.

(see the bellow figure).

// custom fields ===========
// createdAt is reserved field
updatePlan: new Date('2020-04-25'),
plan: 'paid',

Step 6: Check the companyData value, it is shown on Companied field on upper right side.

(see the above figure).

companyData: {
name: 'name',
'links.website': 'http://website.com',
},

If you want to get any data of your Web app automatically. You can just write in your source code inside the data section. It will be shown on TRACKED DATA section.

Manipulate your messenger function

A messenger can be launched programmatically on some user interaction, "like clicking on request for help button". Rather than attaching to document, there should be an option to attach the erxes launcher to a specific element, as it causes the problem in single-page apps since it is not ideal to display the launcher icon in every page.You are now able to manipulate your messenger functions such as change the appearance of a messenger style, a position as well as you can set up the button on your website to call the messenger on specified page.

Button submit

Ability to call submit from outside (parent website), which means listen for callSubmit action from outside to force submit action. For example, you can add any button to call action to open your messenger. There is a window.Erxes.showMessenger() function available on the window object. You can use this function to show messenger programmatically. Insert the following script inside your messenger script code.

document.getElementById('button').onclick = () => {
window.Erxes.showMessenger()
}

First you need uncheck show launcher check to hide default handler. When you check show launcher, the widget section will invisible but you can still callSubmit action to get messenger.

Insert the following script inside your messenger script code.

Once you click submit button on your website, messenger will open.

Messenger position

As part of the support system inside the web, it is always difficult to fix the position of launcher icon to the bottom, or right left position, especially on mobile, since it overlaps with other elements, especially bottom navbar.

You can manipulate the position of the messenger body like following. The messenger is show left side of your website.

<script>
window.erxesSettings = {
messenger: {
brand_id: "AtaT4Z",
css: `
.erxes-messenger {
left: 8px;
transform-origin: 0% 100%;
}
.erxes-launcher {
left: 8px;
right: auto;
}
`
},
};
(function() {
var script = document.createElement('script');
script.src = "http://localhost:3200/build/messengerWidget.bundle.js";
script.async = true;
var entry = document.getElementsByTagName('script')[0];
entry.parentNode.insertBefore(script, entry);
})();
</script>

CSS style

Ability to change form css from parent. In some cases, the developer wants to hide form title, button or modify some auto-generated CSS. Refer the following example of css file.

.erxes-embed-iframe {
margin-top: 100px !important;
margin-bottom: 100px !important;
height: 500px !important;
}
#erxes-messenger-container {
left: 0;
}
#erxes-messenger-iframe {
left: 24px;
}
#erxes-messenger-container:after {
left: -300px;
transform: scaleX(-1);
}
#erxes-messenger-container.erxes-messenger-shown:after {
left: -20px;
}

The messenger position is now left side.

Advanced combination installation

In the advanced combination installation is described combination of the following features.

  • Messenger + Pop-Ups (or Knowledgebase)
  • Messenger + Pop-Ups + Knowledgebase (called 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. Basic instruction is going through same steps and emphasized steps for difference bewteen Pop-Ups and Knowledbase form in (from 3 to 6).

Step 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).

Web messenger + Pop-Ups

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

  1. Add Pop Ups (see the below figure).

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

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

Web messenger + Knowledgebase

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

  1. Add knowledge base (see the below figure).

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

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

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

  1. Copy the code (see the below figure).

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

Step 2: Paste the code in your web source

  1. Paste the Messenger script code in the bottom of the body tag. In this case, Messenger + Knowledgebase code is similar to Messenger + Pop-Ups. (see the below figure).

Messenger+Pop-Ups script code.

Messenger+Knowledgebase script code.

Step 3: Result

  1. 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 contains Pop-Ups and Knowledgebase form 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.

Step 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).

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

  1. Add knowledge base (see the below figure).

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

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

  1. Add Pop Ups (see the below figure).

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

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

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

  1. Copy the code (see the below figure).

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

Step 2: Paste the code in your web source

  1. Paste the code in the bottom of the body tag (see the below figure).

Step 3: Result

  1. Once you have pasted the code, it will look like this in your web right bottom side (see the below figure). Click the support button to show Pop-Up form.

(M + P + K) + Pop-Ups

This is the script install instruction of Pop-Ups form with Messenger which contains Pop-Ups and Knowledgebase form.

Step 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)

  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).

  1. Copy the code (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.

Step 2: Paste the code in your web source

  1. Paste the code in the bottom of the body tag (see the below figure).

Step 3: Result

  1. 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

This is the script install instruction of Knowledgebase form with Messenger which contains Pop-Ups and Knowledgebase form.

Step 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)

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

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

  1. Copy the code (see the below figure).

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

Step 2: Paste the code in your web source

  1. Paste the code in the bottom of the body tag (see the below figure).

Step 3: Result

  1. 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

This is the script install instruction of Pop-Ups, Knowledgebase form with Messenger which contains Pop-Ups and Knowledgebase form.

Step 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)

  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).

  1. Copy the code (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.

Step 2: Paste the code in your web source

  1. Paste the code in the bottom of the body tag (see the below figure).

Step 3: Copy the code of Knowledgebase

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

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

  1. Copy the code (see the below figure).

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

Step 4: Paste the code in your web source

  1. Paste the code in the bottom of the body tag (see the below figure).

Step 3: Result

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

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).

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

  1. 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).

Step 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).

Web messenger + Pop-Ups

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

  1. Add Pop Ups (see the below figure).

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

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

Web messenger + Knowledgebase

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

  1. Add knowledge base (see the below figure).

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

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

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

  1. Copy the code (see the below figure).

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

Step 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).

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

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

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

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

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).

  1. Copy the code section A or section B.

  • 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.

  1. 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).

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

  1. Copy the code (see the below figure).

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

Step 3: Result

  1. 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.

Step 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).

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

  1. Add knowledge base (see the below figure).

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

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

  1. Add Pop Ups (see the below figure).

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

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

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

  1. Copy the code (see the below figure).

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

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).

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

  1. Paste the code (see the below figure).

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

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

  2. If you want to set an optional width and height of Knowledgebase scaling, follow the below steps.

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

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

  1. Copy the code (see the below figure).

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

  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).

  1. Copy the code section A or section B.

  • 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.

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

Step 3: Result

  1. 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

Step 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)

  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).

  1. Copy the code (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.

Step 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).

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

  1. Paste the code (see the below figure).

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

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

  2. 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.

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

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

  1. Copy the code section A or section B.

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

Step 3: Result

  1. 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

Step 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)

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

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

  1. Copy the code (see the below figure).

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

Step 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).

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

  1. Paste the code (see the below figure).

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

Step 3: Result

  1. 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

Step 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)

  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).

  1. Copy the code (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.

Step 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).

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

  1. Paste the code (see the below figure).

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

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

  2. 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.

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

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

  1. Copy the code section A or section B.

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

Step 3: Copy the code of Knowledgebase

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

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

  1. Copy the code (see the below figure).

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

Step 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).

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

  1. Paste the code (see the below figure).

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

Step 5: Result

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

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.

Step 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

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

Step 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

Step 3: Result

  1. 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.

Step 1: Create a messenger contains both Pop-Ups and Knowledgebase.

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

Advanced combination installation

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

Step 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

Step 3: Result

  1. Once you have pasted the code, it will look like this in your web right bottom side (see the below figure). Click to FAQ to see Pop-Ups form.

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

Step 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)

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

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

Messenger+ Pop-Ups

  1. Insert name and select the messenger that you created, then select your created Pop-Ups (see the below figure).

Messenger+ Knowledgebase

  1. Insert name and select the messenger that you created, then select your created Knowledgebase (see the below figure).

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

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

Step 2: Paste the code in your web source

  1. Paste the code in the bottom of the body tag (see the below figure).

Step 3: Result

  1. 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

Step 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)

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

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

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

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

  1. 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.
  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).

  1. Copy the code of Section A or B depend on Pop-Up type (see the below figure).

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

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

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

  1. Copy the code of Section B (see the below figure).

Step 2: Paste the code in your web source

  1. Paste the code in the bottom of the body tag (see the below figure).

Step 3: Result

  1. Once you have pasted the code, it will look like this in your web right bottom side (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.

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)

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

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)

  1. 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).

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

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

Last updated on by Jason-2020