XOS

System configuration

System Configuration is the place where you set up your general configurations of your erxes XOS, such as email settings, language, files to be attached, etc.

The System Configuration has the following fields:

• General settings
• File upload
• Google Cloud Storage
• AWS S3
• AWS SES
• Google
• Common mail config
• Custom mail service
• Data retention
• Constants
• Connectivity Services
• MessagePro

1. Navigate your System Configuration within the Settings section at the bottom left side of your admin screen.

2. General settings

• Language - Select the language used in the erxes XOS

• Currency - Select the currency used for Product & Services and Sales Pipeline plugins.

• Unit of measurement - Select unite of measure of your sale used for the Sales Pipeline. 3. Google Google Cloud Platform (GCP), offered by Google, is a suite of cloud computing services that runs on the same infrastructure that Google uses internally for its end-user products, such as Firebase, Gmail and Pubsub. Alongside a set of management tools, it provides a series of modular cloud services including computing, data storage, data analytics and machine learning. Following steps explain the Google Cloud Project. Which allows us to use Google Cloud Platform's services to our Erxes app.

• Create a Google Cloud Project click here

• Click on the Select Project

• Click on the New Project

• Enter project name and click on the Create button Service account

• Navigate to sidebar IAM & Admin => Service Accounts

• Now let's create service account for our app

• Enter service account name and description then click on the Create button

• Select Owner role and click on the Continue button

• Create key for service account, you will download json file automatically and keep it

• Successfully created service account

• Copy the service account file's content to google_cred.json in erxes-integrations/google_cred.json.sample, and rename it to google_cred.json

• export GOOGLE_APPLICATION_CREDENTIALS="/Path/to/your/[google_cred].json"

• One last touch, we need to configure erxes, Go to Settings => System Config => General System config And configure GOOGLE PROJECT ID, GOOGLE APPLICATION CREDENTIALS fields as in the sceenshot

  • GOOGLE APPLICATION CREDENTIALS is google_cred file's path by default it's ./google_cred.json no need to change
  • GOOGLE APPLICATION CREDENTIALS JSON is google_cred (service account) file's content for Firebase configuration

That's it, now you are good use Google Cloud Platform Services which you can find them here

4. File upload

• Upload file types
• Upload file types of widget
• Upload service type
• Bucket file system type

5. Google Cloud Storage Cloud Storage provides worldwide, highly durable object storage that scales to exabytes of data. You can access data instantly from any storage class, integrate storage into your applications with a single unified API, and easily optimize price and performance.

Requirement:

• Google Cloud Platform project, follow this guide to create one

• Enable Google Cloud Storage API here

• Navigate to here and Create bucket for file upload

• Enter bucket name and fill out rest of the form

• Copy your bucket name and configure it in the Erxes app as follows

Now final step, set upload service type to Google in here

6. Set up your AWS S3 settings here.

• AWS access key id
• AWS secret access key
• AWS bucket 7. Set up your AWS SES settings here.
• AWS SES access key id
• AWS SES secret access key
• AWS region

8. Common mail config This is where you can configure your email addresses to represent your companies on automated & manual emails to be verified. 9. Custom mail service This is where you can connect your own AWS account to erxes XOS. 10. Data retention 11. Constants

• Pronoun choices - Select the pronouns to be available at your Contact plugin.
• Company industry types - Select the types of companies to be available to choose on your Contact plugin.
• Social links - Select the social links to be available to select at your Contact plugin here.

Permission

By creating and modifying the permissions of the team members, you will be able to monitor which members of the team can have access to which information on erxes.

With permission, you can do... Sometimes you don't want your entire team to have access to everything within erxes— that's why we've made it easy to give certain team members access to specific data and features in your erxes. In the team members section of your settings menu, you can edit the permissions of each team members. With permission, your organization can:

• have better data security
• prevent team members' destructed by too much-unrelated information
• ensure a more focused work-oriented environment.

** Creating the permissions The Permission can be found in the settings section on the bottom left side of the screen. By selecting the tab, you will be able to access it. There will be default permission types as admin, marketing, sales, and support at erxes when you first join in. And you can create your permission by editing the existing permissions or creating brand new ones for your organization.

Permission to be explained

For each teammate, you can choose different permissions depending on their needs in the workspace. Below is the logic behind setting up your team member’s permissions. You can create as many permissions as you wish to create, but each type of permission has the following:

• Choose the plugin user group can get access to out of all plugins your erxes has
• Choose the action a team member can take when using that plugin: each plugin contains the number of actions that can be taken when using it.
• Choose the user group allowed to get access to the above plugin and do the action given or
• Choose the team member allowed to get access to the above plugin and do the action given

Step one. Create your user group

Step two. Create your permission to belong to the chosen user group type.

Step three. Edit permissions

Team member

The team members will help you to invite your team members to join your organizations and work together.

Inviting your team members The Team members feature can be found in the settings section on the bottom left side of the screen. By selecting the tab, you will be able to access it.

Step one. Inviting your new team member

Step two. De-activate your team member

Now that you’re already know how to use team members, please go the following the blog posts to learn about different use cases of team members feature and master it.

✌️ Enjoy your journey on erxes with your team members!

Brands

This feature will help you to see the performance of different brands or products & services of your organizations as well as manage dedicated team workload and customer interactions effectively.

With Brands, you can do... With the Brands, you manage their multi-brand channels the most efficiently. erxes is the only Marketing software that can provide this brilliant feature to enterprises.

With brands, you can use:

• Permission: create permission to work in each brand
• Invite team members: invite members dedicated to each brand
• Messenger: Integrate messenger to the right brand so that a dedicated team will be answering
• Form: Integrate the form under the right brand so it will be delivered to the dedicated team
• Knowledge Base: Create Knowledge Base also for the right brand.

Creating your brands

The Brands can be found in the settings section on the bottom left side of the screen. By selecting the tab, you will be able to access it.

Step one. Creating your brands

Import/Export

In this section, you'll learn how to import/Export data from/to your erxes XOS.

Import

1. Navigate Import feature within the Settings menu.

2. Select the type you want to import. The following types are available:

• Deal sales field
• Task activity field
• Ticket feedback field
• Customers user data
• Data on whom created Leads integration
• Companies' customers and other third affiliated companies
• Products Import products

3. Let's try on the user import as an example. Select Customers from Filter by content type.

4. Select Customers again and click Next.

5. If you have not specified a template to import, go to Download template.

6. Check which headers to import.

7. After downloading and preparing Excel, enter your data. Note that it only has the CSV extension.

8. In the next step, you will match your excel header to the data header on the table.

9. Click next, check the name and disclaimer and click Import.

10. Here you can see how far your imports are going.

11. Your data is divided into records, update and error indicators.

12. Created import Action section - Download contacts: Customer file - Instal file - Download contacts: Customer errors - Install the error values for missing files - Delete contact: Customers - Delete an import

Export

1. Navigate your Import & Export section from your Setting, located the bottom left side of the your erxes panel.

2. Let's export data about companies. Select Companies from Filter by content type section

3. Press "Export" tab.

4. Content is the header of the excel sheet you're about to export from your erxes XOS. Check the information you need to export. Once you choose all the information you intended to export press "Next" to go forward.

5. The Filter section on the next page is where you enter the filter to import.

6. Enter your filter values in the General and Custom Properties sections.

7. This case is given a value to retrieve all names if they are included.

8. After filtering, click Apply filter.

9. Click again on Apply. Click Apply 2 times to export, one is for filters and the other is for Apply confirmation to count export filters.

10. You'll be able to see the information found on your filter.

11. Finally, press "Export", chosen files will be exported to your computer.

Channel

Channel is one of the features used for the Inbox plugin only, It helps sorting the incoming information channels according to the different teams responsible for.

With Channels, you can do...

With smartly created channels, organizations can manage their multi-brand channels the most efficiently.

• Categorize the channels for the teams responsible for answering the queries Divide the team under different channels, who would be responsible for managing the customer queries, so others won’t have to interfere in every conversation and improves the effectiveness.
• Analyse the market potential and team performance in each channel to grow After creating channels, it can be easily monitored with erxes Inbox and Report plugins. With clear statistics of each channel, making decisions will be easiest.

Creating your channels

The Channel can be found in the settings section on the bottom left side of the screen. By selecting the Channel tab, you will get an access. To create your channels:

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

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

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

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

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

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

3. Copy the code (see the below figure)

• 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

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

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

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

• 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

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

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

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

Web messenger

Step 1: Copy messenger code

1. Go to Settings menu => Appstore.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

15. 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:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. Create new script to click NEW SCRIPT.

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

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

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

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

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

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

3. Create new script to click NEW SCRIPT.

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

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

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

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

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

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

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

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

1. Go to Settings menu => Appstore.

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

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

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

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

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

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

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

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

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

Web messenger + Knowledgebase

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

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

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

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

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

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

1. Go to Settings menu => Appstore.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 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

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

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

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

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

• 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

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

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

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

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

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: Copy the code of Knowledgebase 6. Go to Knowledge Base menu from left sidebar (see the below figure).

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

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

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

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

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

Web messenger + Pop-Ups (or Knowledgebase)

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

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 3. Click the Add button of Pop-Ups in order to connect the messenger.

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

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

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

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

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

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

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

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

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

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

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

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

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

15. When you edit again the script on Google tag manager, you have to click SAVE, then SUBMIT and PUBLISH it. Messenger+Pop-Ups

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

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

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

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

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

Messenger+Knowledgebase

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

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

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

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

1. Go to Settings menu => Appstore.
2. You need to make sure the brand name that you created messenger (see the below figure).
3. Click the Add button of Knowledge Base in order to connect the messenger.
4. Add knowledge base (see the below figure).
5. Make sure MESSENGER INTEGRATION brand name is same as your created messenger (see the above figure section A and below figure).
6. Then you need to connect Pop-Ups. Click the add button of Pop Ups.
7. Add Pop Ups (see the below figure).
8. Make sure MESSENGER INTEGRATION brand name is same as your created messenger (see the above figure section A and below figure).
9. Make sure POP UPS brand name is same as your created Pop-Ups (see the above figure section B).
10. Go to Messenger and click on the install code button from the right side (see the below figure).
11. Copy the code (see the below figure).
12. If your website is single page app then you can choose a single-page app and copy the code (see the below figure).

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

16. Paste the code (see the below figure).
17. After paste the code, configure to Triggering for All Pages (see the below figure).
18. When you edit again the script on Google tag manager, you have to click SAVE, then SUBMIT and PUBLISH it.
19. If you want to set an optional width and height of Knowledgebase scaling, follow the below steps.
20. Go to Knowledge Base menu from left sidebar (see the below figure).
21. Then choose the option that named "Manage Knowledgebase" from dropdown menu (see the below figure).
22. Copy the code (see the below figure).
23. Paste the code onto the top of body tag in web page source (see the below figure).
24. 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.
25. Go to Pop-Ups menu from left sidebar (see the below figure).
26. Click on the install code button from the right side (see the below figure).
27. 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.

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

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

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

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

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

• 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

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

1. In this combination, first you need to follow the instruction of (M+P+K). Click to the link and check reference. (M + P + K)
2. Go to Knowledge Base menu from left sidebar (see the below figure).
3. Then choose the option that named "Manage Knowledgebase" from the dropdown menu (see the below figure).
4. Copy the code (see the below figure).

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

5. Paste code onto the body tag of web page source (see the below figure). Step 2: Paste the code in google tag manager
6. Log in your google tag manager account.
7. Click the button “Add a new tag” (see the below figure).
8. Click the Tag Configuration => Custom HTML (see the below figure).
9. Paste the code (see the below figure).
10. 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

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

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

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

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

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

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

2. Then follow steps number from 1 to 6 of the instruction for Web messenger + Pop-Ups (or Knowledgebase). Step 2: Copy script and paste the code

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

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

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

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

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

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

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

Messenger+ Pop-Ups

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

Messenger+ Knowledgebase

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

5. Click on the install code button from the list (see the below figure).
6. Copy the code that you created the messenger by clicking COPY TO CLIPBOARD (see the below figure).

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

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

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

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

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

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

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

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

• If your pop-up flow type is "Embedded", then you can choose the code included in section “A” (see the above figure).
• If your pop-up flow type is "Popup" then you can choose the code section “B” (see the above figure).
• ShoutBox, Dropdown, Slide-in Left, Slide-in Right types are, do not necessary to copy install code.

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

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

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

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

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

12. 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:

1. Add trigger on messenger script code in html which you have already configured in Google tag manager.
2. Configure a trigger that messenger does not contains your specified page. In this case, messenger script would be configured on another tag. It is referred to next paragraph for Configure trigger on Messenger + Pop-Up script.

• Trigger Type: Page View
• This trigger fires on: Some page Views
• Fire this trigger condition should be: Page URL does not contain your specified page such as (index/index/category/printers (See the following figure)

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

Configure trigger on Messenger + Pop-Up script:

While messenger script does not contain specified page as above case, you need to configure messenger script with Pop-Ups script. Figure out the following steps.

1. For google tag manager code, you have to paste scripts of both Messenger and Pop-Ups code. (See the following figure)

2. Add trigger on the html code. The code trigger condition contains your specified page.

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

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