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

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

Then choose your messenger and click on the install code button from the right side (see the below figure).
Copy the code (see the below figure).
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 6. Paste the code in bottom of the body tag (see the below figure).

Step 3: Result 7. 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

Go to Pop-Ups menu from left sidebar (see the below figure).
Click on the install code button from the right side (see the below figure).
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 4. 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 5. Once you have pasted the code, it will look like this in your web (see the below figure)

Knowledgebase

Step 1: Copy knowledgebase code

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

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

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 4. Paste the code in bottom of body tag on every page you want Erxes knowledge base to appear (see the below figure).

Step3: Result 5. 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

Log in your google tag manager account.
Click on the Admin from the dropdown menu, then choose the "Install Google Tag Manager" from the right sidebar (see the below figure).

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

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

Go to Settings menu => Appstore.
Click on the “Appstore” menu (see the below figure).
Then choose your messenger and click on the install code button from the right side (see the below figure).
Copy the code of Basic Javascript (see the below figure)

Step 2: Paste the code in google tag manager 5. Log in your google tag manager account. 6. Click the button “Add a new tag” (see the below figure). 7. Click the Tag Configuration => Custom HTML (see the below figure).

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

Step 3: Result 7. 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

Log in your Erxes account.
Go to Pop-Ups menu from left sidebar (see the below figure).
Click the install code button which you created the Pop Ups (see the below figure).

Copy the code (see the below figure).

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

Click the Tag Configuration => Custom HTML (see the below figure).
Paste the code of Erxes pop-up (see the below figure).
After paste the code, configure to Triggering for All Pages (see the below figure).

When you edit again the script on Google tag manager, you have to click SAVE, then SUBMIT and PUBLISH it.
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.
Go to Pop-Ups menu from left sidebar (see the below figure).
Click on the install code button from the right side (see the below figure).

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.

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

Step3: Result 16. 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:

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

Knowledgebase

Step 1: Copy knowledgebase code

Log in to your erxes account
Go to Knowledge Base menu from left sidebar (see the below figure).
Then choose the option that named "Manage Knowledgebase" from dropdown menu (see the below figure).
Copy the install code of knowledge base (see the below figure).

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

Click the Tag Configuration=> Custom HTML (see the below figure).
Paste the code of Erxes knowledge base code (see the below figure).
After paste the code, configure to Triggering for All Pages (see the below figure).
When you edit again the script on Google tag manager, you have to click SAVE, then SUBMIT and PUBLISH it.
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).
Then choose the option that named "Manage Knowledgebase" from dropdown menu (see the below figure).

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

Step3: Result 16. 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

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

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

Insert name and select the messenger that you created (see the below figure).
Click on the install code button from the list (see the below figure).
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 7. 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 8. 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

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

Create new script to click NEW SCRIPT.
Insert name and select the POP UPS that you created.
Click on the install code button which you created POP UPS from the list (see the below figure).
Copy the code (see the below figure).
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).
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 9. Paste the code the bottom of body tag on every page you want Erxes pop-ups to appear (see the below figure).

Step3: Result 10. 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

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

Create new script to click NEW SCRIPT.
Insert name and select the KNOWLEDGEBASE TOPIC that you was created before (see the below figure).
Click on the install code button which you created KNOWLEDGEBASE TOPIC from the list (see the below figure).
Copy the code (see the below figure).
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).

Then choose the option that named "Manage Knowledgebase" from dropdown menu (see the below figure).
Copy the code (see the below figure).
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 12. 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 13. 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.

Go to Settings menu => Appstore.
Click on the “Appstore” menu (see the below figure).
Then choose your messenger and click on the install code button from the right side (see the below figure).
Copy the code (see the below figure).
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 fields under brand_id in your messenger script. Insert the messenger script in your web body section. :

<script>
  window.erxesSettings = {
    messenger: {
      brand_id: "sNbKdZ",
      email: '[email protected]',
      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

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

Web messenger + Pop-Ups

Click the Add button of Pop-Ups in order to connect the messenger.
Add Pop Ups (see the below figure).
Make sure MESSENGER INTEGRATION brand name is same as your created messenger (see the above figure section A and below figure).
Make sure POP UPS brand name is same as your created Pop-Ups (see the above figure section B).

Web messenger + Knowledgebase

Click the Add button of Knowledge Base in order to connect the messenger.
Add knowledge base (see the below figure).
Make sure MESSENGER INTEGRATION brand name is same as your created messenger (see the above figure section A and below figure).
In this case, different brand name of Messenger and Knowledgebase can be run normal.
Go to Messenger and click on the install code button from the right side (see the below figure).

Copy the code (see the below figure).
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 10. 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 11. 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

Go to Settings menu => Appstore.
You need to make sure the brand name that you created messenger (see the below figure).
Click the Add button of Knowledge Base in order to connect the messenger.
Add knowledge base (see the below figure).
Make sure MESSENGER INTEGRATION brand name is same as your created messenger (see the above figure section A and below figure).
Then you need to connect Pop-Ups. Click the add button of Pop Ups.
Add Pop Ups (see the below figure).
Make sure MESSENGER INTEGRATION brand name is same as your created messenger (see the above figure section A and below figure).
Make sure POP UPS brand name is same as your created Pop-Ups (see the above figure section B).
Go to Messenger and click on the install code button from the right side (see the below figure).
Copy the code (see the below figure).
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 13. Paste the code in the bottom of the body tag (see the below figure).

Step 3: Result 11. 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

In this combination, first you need to follow the instruction of (M+P+K). Click to the link and check reference. (M + P + K)
Go to Pop-Ups menu from left sidebar (see the below figure).
Click on the install code button from the right side (see the below figure).

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 5. Paste the code in the bottom of the body tag (see the below figure).

Step 3: Result 6. 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

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

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

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 5. Paste the code in the bottom of the body tag (see the below figure).

Step 3: Result 6. 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

In this combination, first you need to follow the instruction of (M+P+K). Click to the link and check reference. (M + P + K)
Go to Pop-Ups menu from left sidebar (see the below figure).
Click on the install code button from the right side (see the below figure).

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

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

Step 3: Copy the code of Knowledgebase 6. Go to Knowledge Base menu from left sidebar (see the below figure).

Then choose the option that named "Manage Knowledgebase" from the dropdown menu (see the below figure).
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 9. Paste the code in the bottom of the body tag (see the below figure).

Step 3: Result 10. 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

Log in your google tag manager account.
Click on the Admin from the dropdown menu, then choose the "Install Google Tag Manager" from the right sidebar (see the below figure).

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

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

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

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

Add Pop Ups (see the below figure).

Make sure MESSENGER INTEGRATION brand name is same as your created messenger (see the above figure section A and below figure).
Make sure POP UPS brand name is same as your created Pop-Ups (see the above figure section B). Web messenger + Knowledgebase
Click the Add button of Knowledge Base in order to connect the messenger.
Add knowledge base (see the below figure).
Make sure MESSENGER INTEGRATION brand name is same as your created messenger (see the above figure section A and below figure).

In this case, different brand name of Messenger and Knowledgebase can be run normal.
Go to Messenger and click on the install code button from the right side (see the below figure).

Copy the code (see the below figure).
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 10. Log in your google tag manager account. 11. Click the button “Add a new tag” (see the below figure).

Click the Tag Configuration => Custom HTML (see the below figure).
Paste the code of Erxes pop-up (see the below figure).
After paste the code, configure to Triggering for All Pages (see the below figure).
When you edit again the script on Google tag manager, you have to click SAVE, then SUBMIT and PUBLISH it. Messenger+Pop-Ups
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.
Go to Pop-Ups menu from left sidebar (see the below figure).
Click on the install code button from the right side (see the below figure).
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.

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

Messenger+Knowledgebase

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

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

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

Step 3: Result 20. 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

Go to Settings menu => Appstore.
You need to make sure the brand name that you created messenger (see the below figure).
Click the Add button of Knowledge Base in order to connect the messenger.
Add knowledge base (see the below figure).
Make sure MESSENGER INTEGRATION brand name is same as your created messenger (see the above figure section A and below figure).
Then you need to connect Pop-Ups. Click the add button of Pop Ups.
Add Pop Ups (see the below figure).
Make sure MESSENGER INTEGRATION brand name is same as your created messenger (see the above figure section A and below figure).
Make sure POP UPS brand name is same as your created Pop-Ups (see the above figure section B).
Go to Messenger and click on the install code button from the right side (see the below figure).
Copy the code (see the below figure).
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 13. Log in to your google tag manager account. 14. Click the button “Add a new tag” (see the below figure). 15. Click the Tag Configuration=> Custom HTML (see the below figure).

Paste the code (see the below figure).
After paste the code, configure to Triggering for All Pages (see the below figure).
When you edit again the script on Google tag manager, you have to click SAVE, then SUBMIT and PUBLISH it.
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).
Then choose the option that named "Manage Knowledgebase" from dropdown menu (see the below figure).
Copy the code (see the below figure).
Paste the code onto the top of body tag in web page source (see the below figure).
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.
Go to Pop-Ups menu from left sidebar (see the below figure).
Click on the install code button from the right side (see the below figure).
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.

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

Step 3: Result 29. 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

In this combination, first you need to follow the instruction of (M+P+K). Click to the link and check reference. (M + P + K)
Go to Pop-Ups menu from left sidebar (see the below figure).
Click on the install code button from the right side (see the below figure).
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

Log in your google tag manager account.
Click the button “Add a new tag” (see the below figure)
Click the Tag Configuration => Custom HTML (see the below figure).
Paste the code (see the below figure).
After paste the code, configure to Triggering for All Pages (see the below figure).
When you edit again the script on Google tag manager, you have to click SAVE, then SUBMIT and PUBLISH it.
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.
Go to Pop-Ups menu from left sidebar (see the below figure).
Click on the install code button from the right side (see the below figure).
Copy the code section A or section B.
Paste code onto the body tag of web page source (see the below figure).

Step 3: Result 21. 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

In this combination, first you need to follow the instruction of (M+P+K). Click to the link and check reference. (M + P + K)
Go to Knowledge Base menu from left sidebar (see the below figure).
Then choose the option that named "Manage Knowledgebase" from the dropdown menu (see the below figure).
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.

Paste code onto the body tag of web page source (see the below figure). Step 2: Paste the code in google tag manager
Log in your google tag manager account.
Click the button “Add a new tag” (see the below figure).
Click the Tag Configuration => Custom HTML (see the below figure).
Paste the code (see the below figure).
After paste the code, configure to Triggering for All Pages (see the below figure).

Step 3: Result 11. 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

In this combination, first you need to follow the instruction of (M+P+K). Click to the link and check reference. (M + P + K)
Go to Pop-Ups menu from left sidebar (see the below figure).
Click on the install code button from the right side (see the below figure).
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

Log in your google tag manager account.
Click the button “Add a new tag” (see the below figure)
Click the Tag Configuration => Custom HTML (see the below figure).
Paste the code (see the below figure).
After paste the code, configure to Triggering for All Pages (see the below figure).
When you edit again the script on Google tag manager, you have to click SAVE, then SUBMIT and PUBLISH it.
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.
Go to Pop-Ups menu from left sidebar (see the below figure).
Click on the install code button from the right side (see the below figure).
Copy the code section A or section B.
Paste code onto the body tag of web page source (see the below figure).

Step 3: Copy the code of Knowledgebase 21. Go to Knowledge Base menu from left sidebar (see the below figure). 22. Then choose the option that named "Manage Knowledgebase" from the dropdown menu (see the below figure). 23. 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 24. Log in your google tag manager account. 25. Click the button “Add a new tag” (see the below figure).

26. Click the Tag Configuration => Custom HTML (see the below figure). 27. Paste the code (see the below figure). 28. After paste the code, configure to Triggering for All Pages (see the below figure).

Step 5: Result 29. 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.

Go to Advanced combination installation => Web messenger + Pop-Ups (or Knowledgebase). Advanced combination installation
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
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 4. 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)

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

Go to Advanced combination installation => Web messenger + Pop-Ups + Knowledgebase. Advanced combination installation
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
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 4. 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

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)
Go to Settings menu => Script manager (see the below figure).
Create new script to click NEW SCRIPT (see the below figure).

Messenger+ Pop-Ups

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

Messenger+ Knowledgebase

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

Click on the install code button from the list (see the below figure).
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 7. Paste the code in the bottom of the body tag (see the below figure). Step 3: Result 8. 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

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)
Go to Settings menu => Script manager (see the below figure).
Create new script to click NEW SCRIPT (see the below figure).
Insert name and select the Messenger, Pop-Ups and Knowledgebase that you created (see the below figure).
Click on the install code button from the list (see the below figure).
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.

Go to Pop-Ups menu from left sidebar (see the below figure).
Click on the install code button from the right side (see the below figure).
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.
Go to Knowledge Base menu from left sidebar (see the below figure).
Then choose the option that named "Manage Knowledgebase" from the dropdown menu (see the below figure).
Copy the code of Section B (see the below figure).

Step 2: Paste the code in your web source 13. Paste the code in the bottom of the body tag (see the below figure). Step 3: Result 14. 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:

Add trigger on messenger script code in html which you have already configured in Google tag manager.
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)

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.

For google tag manager code, you have to paste scripts of both Messenger and Pop-Ups code. (See the following figure)
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).

Then go to tags and selects the trigger that you configured (See the following figure).
See the figure for Google tag script with trigger configuration.

Employee Experience Management

A well-functioning HR system is crucial for attracting, retaining and developing the right talent, and aligning employees with company goals and values. Clear communication and effective management of HR processes is essential for maintaining smooth operations and creating a positive work environment.

At the same time employee retention is a major concern for companies, keeping employees engaged and committed by ensuring they understand the company’s vision, goals and getting regular updates on where the company is heading can help retain employees longer.

erxes EXM (Employee Experience Management) system designed to make the HR activities of your organization easier, help creating the best experience for everyone at the workplace.

Centralized complete HR database

⭐ This is a comprehensive and centralized system designed to efficiently manage and organize all human resource information within an organization. This system is designed to streamline HR processes by consolidating employee information such as

contact details,
employment agreements,
job description,
statement of work,
organizational chart,
career history,
payroll,
into a single location. This allows HR managers to easily access and manage this information, thus reducing the time and effort required for manual data entry and retrieval.

Knowledge, onboarding & training campaign

A “Knowledge” plugin offers new employees easy access to company information, resources, and training opportunities to help adapt into the company’s culture quicker. EXM’s training platform provides flexible, online access to skill-building, personal and professional development, and new employee orientation from anywhere, anytime.

Automatically generated HR templates

⭐ The pre-made templates will simplify the document generation process where once key information is input into the template, the EXM system facilitates the automatic generation of various HR documents, such as employment agreements and statements of work. This automation not only eliminates the potential for manual errors, but also saves valuable time for HR professionals.

Fully customizable recruitment pipeline

Our customizable recruitment function and hiring pipeline includes automation features that make managing the recruitment process easy. Manage candidates, interviews, selection and shortlists all in one place, allowing recruiters to focus on more important tasks.

The next generation of time-tracking system

The Timeclock plugin allows employees to record work shifts, request time off, and schedule shifts on one platform, accessible on web and mobile devices, using the office location coordinates. Automates tracking of monthly totals, tardiness, and absence records, eliminating the need for manual timekeeping and improving accuracy.

Clear view of employee productivity

The “Task” plugin helps employees manage tasks, workload, and deadlines, simplifies task distribution for team leaders, and improves productivity by allowing viewing tasks in various formats.

Employee feed & Communication

One organization, one channel, one chat A centralized communication channel improves productivity and cohesion within the organization by streamlining information exchange, eliminating confusion and providing group and private chat options with easy access to “most used” and “favorites” . It prevents distractions by external channels like social media, increasing productivity and promoting a more efficient work environment.
Digital Wall of Fame Employee recognition promotes satisfaction and motivation. EXM provides a platform for expressing gratitude and acknowledgement of performance to individuals and teams, promoting a positive work environment and culture of excellence.

Quick and efficient asset record

The assets feature allows HR professionals to manage asset records, streamlining the process of adding and updating information. This makes the process of recording assets faster and more organized within the EXM system.

EXM is a comprehensive approach to employee experience management that addresses all aspects of the employee journey, from recruitment to retirement. With the help of EXM, companies can create an environment where employees feel valued, motivated, and connected to the company’s mission, leading to higher employee retention and overall organizational success.

Happy work experience, happy life for everyone! 🤗

Want to bring your HR system to the next level with EXM? Fill this form out and our sales team will contact you shortly.

Industries

Teams

HR

Employee Experience Management

erxes EXM (Employee Experience Management) system designed to make the HR activities of your organization easier, help creating the best experience for everyone at the workplace.

Centralized complete HR database

contact details,
employment agreements,
job description,
statement of work,
organizational chart,
career history,
payroll,
into a single location. This allows HR managers to easily access and manage this information, thus reducing the time and effort required for manual data entry and retrieval.

Knowledge, onboarding & training campaign

Automatically generated HR templates

Fully customizable recruitment pipeline

The next generation of time-tracking system

Clear view of employee productivity

The “Task” plugin helps employees manage tasks, workload, and deadlines, simplifies task distribution for team leaders, and improves productivity by allowing viewing tasks in various formats.

Employee feed & Communication

One organization, one channel, one chat A centralized communication channel improves productivity and cohesion within the organization by streamlining information exchange, eliminating confusion and providing group and private chat options with easy access to “most used” and “favorites” . It prevents distractions by external channels like social media, increasing productivity and promoting a more efficient work environment.
Digital Wall of Fame Employee recognition promotes satisfaction and motivation. EXM provides a platform for expressing gratitude and acknowledgement of performance to individuals and teams, promoting a positive work environment and culture of excellence.

Quick and efficient asset record

Happy work experience, happy life for everyone! 🤗

Want to bring your HR system to the next level with EXM? Fill this form out and our sales team will contact you shortly.

Products

Script Installation

Quick installation

Web messenger

Pop-Ups

Knowledgebase

Google tag manager

Install google tag manager

Web messenger

Pop-Ups

Knowledgebase

Erxes script manager

Web messenger

Pop-Ups

Knowledgebase

Advanced setup

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

Manipulate your messenger function

Advanced combination installation

Web messenger + Pop-Ups (or Knowledgebase)

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

(M + P + K) + Pop-Ups

(M + P + K) + Knowledgebase

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

Advanced Google tag manager

Install google tag manager

Web messenger + Pop-Ups (or Knowledgebase)

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

(M + P + K) + Pop-Ups

(M + P + K) + Knowledgebase

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

Advanced Erxes script manager

Web messenger + Pop-Ups (or Knowledgebase)

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

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

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

Google Tag Manager Troubleshooting guide

Configure trigger on Messenger script:

Configure trigger on Messenger + Pop-Up script:

Employee Experience Management

Centralized complete HR database

Knowledge, onboarding & training campaign

Automatically generated HR templates

Fully customizable recruitment pipeline

The next generation of time-tracking system

Clear view of employee productivity

Employee feed & Communication

Quick and efficient asset record

Industries

Teams

HR

Employee Experience Management

Centralized complete HR database

Knowledge, onboarding & training campaign

Automatically generated HR templates

Fully customizable recruitment pipeline

The next generation of time-tracking system

Clear view of employee productivity

Employee feed & Communication

Quick and efficient asset record