Customized Pop-up

This is a small web page that will then appear instead of the default pop-up. To do this, you need to create an HTML document, add CSS styles, add Javascript, upload Pop-up to any web hosting that supports HTTPS protocol or to your web page, and then add a link to the Pop-up in the Mluvii administration.

For simplicity and clarity, we recommend creating your own Pop-up using the codepen.io web application.

To acquire a specific idea, let us take a look at creating your own simple Pop-up. The final shape of the Pop-up will look like this:

How to do it

HTML document

Create a simple HTML document. Pop-up can contain any number of HTML elements - images, texts, inputs, buttons, and so on.

Please note that codepen.io does not support the uploading of images in the free version, it must be saved on your own storage. We have used the Github pages because we will work with them later in this guide.

CSS Styles

If you have created a Pop-up structure using HTML, you can insert CSS styles.

JavaScript

Use Javascript to have interactive and dynamic Pop-up. The mluvii application offers several features that can help with your focus.

Closing Pop-up, opening chat

To close the Pop-up, you can:

window.parent.postMessage({type:"HIDE_MLUVII_CHAT"},"*");

To open the chat window feature:

window.parent.postMessage({type:"OPEN_MLUVII_CHAT"},"*");

A cross to close pop-up is created in the Pop-up. To launch the cross, you will be listening to its clicking in the Pop-up:

const cross = document.getElementById('Close');
cross.addEventListener('click', function() {
  window.parent.postMessage({type:"HIDE_MLUVII_CHAT"},"*");
});

Obtaining preset parameters

Using the feature:

window.parent.postMessage({type:"GET_MLUVII_CUSTOM_PARAMS"},"*");

You can call all your custom parameters that are linked to your customer into your Pop-up until the call period is connected to the feature. The default settings contain the preset parameters “button language”, “URL” and “page name”, where the client is located and “the button name”.

This feature connects to the server of the mluvii application and sends back the event that contains the parameter. We need to listen to this event before we call this feature:

window.addEventListener('message', function(msg) {
 if(msg.data.type === 'SET_MLUVII_CUSTOM_PARAMS') {
  // Here will be the follow-up code that will be executed when the parameters are received.
 }
});

The “msg” callback function contains all the data from the parameters.

Change the Pop-up view based on parameters

In our callback function, we can then paste the code to change what is displayed in the Pop-up.

The first example is the oo1_widget_lang parameter, thus the button language. If the language is Czech, a Czech description will appear. In the case of another language it is displayed in English:

const message = document.getElementById('Message');
if(msg.data.params.oo1_widget_lang === 'cs') {
   message.innerText = 'Chcete se dozvědět více o našem produktu?';
} else {
   message.innerText = 'Do you want to know more about our product?';
}

(Different Pop-ups can also be used for Czech, English and Russian languages.)

The second example is the oo1_ref_url parameter, or the URL of the page from where the customer came to the page with our button. You can imagine a web page that has subpages index.html - main page and support.html - technical support. Based on where the client is, you will see the text of your Pop-up:

if(msg.data.params.oo1_ref_url === 'https://patricke004.github.io/customCTA/index.html') {
   // We do not have to do anything here; translated into English
} else if (msg.data.params.oo1_ref_url === 'https://patricke004.github.io/customCTA/support.html') {
   message.innerText = 'Naši technici jsou Vám nyní k dispozici!';
}

For simplicity, create a simple site with index.html and support.html subpages on Github pages. In the index, add a simple link to the support page and enter the code of your WebChat widget.

You see that the Pop-up text changes when changing to the support page.

You can also use the oo1_widget parameter. If you have different configuration widgets on different site subpages, you can still use the same Pop-up and just modify it based on the name of that WebChat widget.

Change the Pop-up view based on customized parameters

The mluvii application allows the Pop-up to obtain not only preset parameters but also customized parameters. You must first set it in the administration in the Application section.

To use the parameters, you must first accept the application. They can be sent, for example, in the WebChat widget, in the entry form, as well as their own website. Here is a sample of how to do it from a website (for example, after a user logs on, clicking on a button, etc.).

To send customized parameters to a server from a web page, this feature is followed by a data acquisition function from the server that emits an event typemessage, which we already hear in our Pop-up:

$owidget.addCustomData(
   'navod_clientName', 'Jan Novak'
);
postMessage({type:"GET_MLUVII_CUSTOM_PARAMS"},"*");

$ owidget is the object representing your WebChat widget and is available within your site (for more information, see Configuring your own widget).

You paste this code behind the code of your WebChat widget on your site. In our Pop-up this gives us access to customized parameters navod _clientName.

In the real world, you can use this option, for example, when a customer logs on to your website. You can easily imitate it by adding a “login” button to your site and the feature that will be called the moment the user clicks the button.

const loginButton = document.getElementById('Login');

loginButton.addEventListener('click', function() {
 // zde by měla být logika autentizace uživatele, jakmile se tak stane, zavoláte funkci:
 $owidget.addCustomData(
   'navod_clientName', 'Jan Novak'
 );
 postMessage({type:"GET_MLUVII_CUSTOM_PARAMS"},"*");
});

You will then edit your Pop-up so that the user name is displayed. You can, for example, sign up for a special offer for existing clients, personal consultation, etc. Add the following to the callback function 'message' for the listener:

if(msg.data.params.navod_clientName) {
   message.innerText = 'Uživatel: ' + msg.data.params.navod_clientName + '\n Máme pro Vás speciální nabídku!';
}

You get the final result, Pop-up, which dynamically changes according to the language of the button, the website subpage and the user login.

Save Pop-up for hosting

If you are using codepen.io when creating your own Pop-up, it is now necessary to export the Pop-up. Click the “Save” button, then export it in “.zip” format:

You can save Pop-up created as a subpage of your website or use any web hosting such as Github pages. The selected hosting must support access through the HTTPS protocol.

Insert the Pop-up into the WebChat

Enter the URL of your Pop-up and the required dimensions in the Settings -> Webchat -> WebChat widget -> Pop-up in the widget on the “Chat Button” tab at the advanced setting “Page” option in the iframe element in the “Notification Type” field and in the fields below.