Customized CTA

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 CTA to any web hosting that supports HTTPS protocol or to your web page, and then add a link to the CTA in the Mluvii administration.

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

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


### How to do it #### HTML document Create a simple HTML document. CTA 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 CTA structure using HTML, you can insert CSS styles.

JavaScript

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

Closing CTA, opening chat

To close the CTA, 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 CTA. To launch the cross, you will be listening to its clicking in the CTA:

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

Using the feature:

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

You can call all your custom variables that are linked to your customer into your CTA until the call period is connected to the feature. The default settings contain the preset variables “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 variable. 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 variables are received.
 }
});

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

Change the CTA view based on variables

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

The first example is the oo1_widget_lang variable, 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 CTA’s can also be used for Czech, English and Russian languages.)

The second example is the oo1_ref_url variable, 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 CTA:

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 configuration package.

You see that the CTA text changes when changing to the support page.

You can also use the oo1_widget variable. If you have different configuration packages on different site subpages, you can still use the same CTA and just modify it based on the name of that package.

Change the CTA view based on customized variables

The mluvii applicationallows the CTA to obtain not only preset variables but also customized variables. You must first set it in the administration in the Application section.

To use the variables, you must first accept the application. They can be sent, for example, in the configuration package, 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 variables 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 CTA:

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

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

You paste this code behind the code of your configuration package on your site. In our CTA this gives us access to customized variablesnavod _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 CTA 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, CTA, which dynamically changes according to the language of the button, the website subpage and the user login.

Save CTA for hosting

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

You can save CTA’s 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 CTA into the configuration package

Enter the URL of your CTA and the required dimensions in the Settings -> Package -> CTA in the package 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.

results matching ""

    No results matching ""