Additional chat settings

A long article for code lovers

Сhat settings changes via JavaScript

You can change your chat settings via Java Script. Let's look through some interesting cases. 

Important: You need to replace xxxxx in the code with your apiKey (you can find it in API keys tab in Settings).

Important: the code should be placed instead of dashly.connect in code which you entered to your site. You can find it in Settings.

Multilingual chat

If your site supports several languages you can customize your chat. Translate such phrases as "New message" or "enter your message and click Enter" to any language.

Important: offline messages text can be set in one language only. We are working on multilingual offline messages.

Here is a code for changing chat language. Replace phrases with your own:

var config = {
    i18n: {
        thanks: "Thank you",
        dialogs_history: "Conversation history",
        new_message: "New message",
        enter_message: "Type your message and press Enter",
        dialogs_zerodata: "There are no conversations yet.
We've never talked before", enter_email: "Enter your email", enter_phone: "Enter your phone number", leave_email: "You can leave your email and we'll continue this conversation via email" }, settings: { messenger_collapsed_text: "Ask me...", messenger_offline_message: "No operators online now. Write your question and we will help you during the working time", messenger_welcome_message : "Ask a question, we will answer.", } } dashly.connect('xxxxx',config);

Change operator's status

You can manually change operator's status on all or several pages of your site:

var config = {
    settings: {
        status_operators:  "online"
    }
}
dashly.connect('xxxxx',config);

 

Different chat colors on different pages

Make sure that the chat doesn't look strange on your website in terms of colour. To change this, write argument messenger_collapsed_color for settings object.

var config = {
    settings: {
            messenger_collapsed_color : "178227"
    }
}
dashly.connect('xxxxx',config);

Different chat position on different pages

Сhat can be located in different places on each page. For example, chat can be at the bottom left corner on the main page, and at the bottom right corner on other pages. The messenger_position of the Settings object is responsible for the chat position.

var config = {
    settings: {
        messenger_position: "right_bottom"
    }
}
dashly.connect('xxxxx',config);

Full list of chat settings

We have provided you with a partial list of possible chat settings. You can customize it using dashly.connect arguments.

You can add an object as the second argument to the dashly.connect method:

{

i18n: {

  thanks: ' Thank you ',

  dialogs_history: ' Conversations history ',

  New_message: ' New message ',

  enter_message: ' Type your message and press enter ',

  dialogs_zerodata: ' No conversations.<br>You haven't contacted us yet ',

  enter_email: ' Enter email ',

  enter_phone: ' Enter phone number ',

  page_title_new_message: ' New Message '

},

settings: {

messenger_collapsed_text: "Ask me..."

messenger_name :  "Christine"

messenger_offline_message: "Currently there are no opertors online. Leave your contact information and we will reach you back during our working hours."

messenger_welcome_message: "Ask your question and we will try to answer. Contact us! ",

status_operators:  "online "

}

}

Object i18n arguments

thanks – The phrase that appears after one enters contact information in the chat

dialogs_history – Title of "Conversation history" tab

new_message – Text in a button that creates a new dialog in the "Conversations history" tab

enter_message – Text in the input field

dialogs_zerodata – Zero screen when there are no conversations

enter_email – text in the field for entering email

enter_phone – text in the field for entering phone number

page_title_new_message - new conversation title

 

Settings object arguments

messenger_collapsed_color – chat color

messenger_collapsed_text – inscription in the minimized mode

messenger_collection_lead_type – what data is required to enter in offline message If the system knows the required data it won't ask to enter it one more time. Text message will be shown.

messenger_hide_collapsed - hide text in minimized mode

messenger_mode – the mode of the chat: visible, has_dialogs (when there is a conversation), hidden

messenger_name - default name (shown when none of operators responded yet)

messenger_offline_message - Lead will see an offline message if  they contact you when all operators are offline.

messenger_show_offline_message - Show message that all operators are offline

messenger_position - minimized mode of the chat: left_top (top left corner), left_bottom (bottom left corner), right_top (top right corner), right_bottom (bottom right corner)

messenger_welcome_message - inscription in the chat  which appears when one opens it

 status_operators – Status of your operators online, offline

 

How to change chat position via CSS

You can place your chat in one of four corners of the screen in chat settings:

  • Top left;

  • Bottom left;

  • Top right;

  • Bottom right.

Open Chat settings tab and choose position of chat in minimized mode.

If you want to move the chat relatively to the selected position then it is possible via CSS. The code is inserted in Trackmaster-> Run JavaScript.

Use the script to set the distance (in pixels) where you want to move the chat icon.

var css = '#dashly-messenger-collapsed.dashly-messenger-right_bottom{margin: 0px 0px 120px 0px!important;}', head = document.head || document.getElementsByTagName('head')[0], style = document.createElement('style'); style.type = 'text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); //First number (0px) — move above //Second number (0px) — move from right //Third number (120px) — move below //Fourth number (0px) — move from left


How to add social media icons above Dashly chat

To place social media icons above Dashly chat, you need to add the following code to Tracking master -> Run Java Script code.

Important: Do not forget to change links in example to your own.

How to get a link to your account?

Facebook: facebook has short link to messenger - https://m.me

You will just need to add id of your community to it or it's username- https://m.me/dashlytest

Telegram: Add the name of your bot to https://telegram.me, as example- https://telegram.me/dashlytesttbot

var dashlyLink = {
                      'telegram': 'https://telegram.me/xxx',
                        'facebook': 'https://m.me/xxx',
                       
}
function dashlyAddStyleMessenger() {
    var divStyle = document.createElement("div");
    divStyle.innerHTML = "<style>\
        #dashly-messenger-social {\
            position: absolute; \
            padding-right: 18px;\
            display: table;\
            right: 0;\
            bottom: 60px;\
            width: 40px;\
            z-index: 1;\
            -webkit-transition: all 0.2s ease-in-out;\
            -moz-transition: all 0.2s ease-in-out;\
            -o-transition: all 0.2s ease-in-out;\
            -ms-transition: all 0.2s ease-in-out;\
            transition: all 0.2s ease-in-out;\
            opacity: 0;\
            display: none;\
        }\
        #dashly-messenger-collapsed:hover #dashly-messenger-social, #dashly-messenger-social.dashly-messenger-social-hover {\
           opacity: 1; \
           display: block;\
        }\
        </style>\
    ";
    document.body.appendChild(divStyle);
}
 
function dashlyFormMessengerBts(){
    var container = document.createElement("div");
    container.id = "dashly-messenger-social"
    container.className = 'dashly-messenger-social-hover';
    container.style = "";
   
    // Telegram icon
    if(dashlyLink['telegram']) {
        container.appendChild(createMessengerBts("dashly-messenger-telegram", dashlyLink['telegram'], 0, -40));
    }
   
    // Facebook icon
    if(dashlyLink['facebook']) {
        container.appendChild(createMessengerBts("dashly-messenger-facebook", dashlyLink['facebook'], 0, -80));
    }
   
   
   
    var messenger = document.getElementById("dashly-messenger-collapsed");
    if (typeof(messenger) !== undefined) {
       
        messenger.appendChild(container);
        setTimeout(function () {document.getElementById("dashly-messenger-social").className = '';}, 3000)
    }
 
}
function createMessengerBts(id,href,positionX, positionY) {
    var soc_style = "display: table-cell !important;\
                     position: relative !important;\
                     float: right !important;\
                     width: 40px !important;\
                     height: 40px !important;\
                     padding-bottom:15px;\
                     -webkit-transition: all 0.2s ease-in-out !important;\
                     -moz-transition: all 0.2s ease-in-out !important;\
                     -o-transition: all 0.2s ease-in-out !important;\
                     -ms-transition: all 0.2s ease-in-out !important;\
                     transition: all 0.2s ease-in-out !important;\
                     "
    var avatar = "background-image: url('https://files.dashly.io/messenger/1496063465602-a22bcc37-66e1-4f80-a353-13c3bd66704b.png') !important; width: 100% !important; height: 100% !important; display: inline-block !important; background-size: 40px auto !important; box-shadow: 0 6px 10px rgba(0,0,0,0.25) !important; cursor: pointer !important; border-radius: 20px !important;";
   
    var div = document.createElement("div");
    div.id = id;
    div.setAttribute('style', soc_style)
    var innerHtml = document.createElement("a");
    innerHtml.href = href
    innerHtml.target = "_blank";
    innerHtml.setAttribute('style', avatar+" background-position: " + positionX + "px " + positionY + "px !important;")
    div.appendChild(innerHtml);
    return div;
}
 
function dashlyAddMessengerBts(){
 if (document.getElementById("dashly-messenger-collapsed") && !document.getElementById("dashly-messenger-telegram")) {
            dashlyFormMessengerBts();
     }
 
}
 
dashlyFormMessengerBts();
dashlyAddStyleMessenger();
dashly.messenger.toStateCollapsedDef = dashly.messenger.toStateCollapsed;
dashly.messenger.toStateCollapsed = function (thanks) {
  dashly.messenger.toStateCollapsedDef(thanks);
    dashlyAddMessengerBts();
}

Now when you hover over the Dashly chat the icons of social media will appear.

 

Conversations auto assignment

Conversations auto assignment can be set via our public API.

You need to create web-service which will realize operator's assignment logic.

This web-service should be called via Webhook. Learn about calling Webhook in Dashly in this article. Set "Lead initiated a conversation in chat" as a webhook trigger.

As soon as lead initiates a chat conversation, a webhook with all lead attributes and link to the page will be sent.

More information about webhook is here.

Example:

1) Example of assigning operator Andrew (id 24574) to all open conversations (php): 

 

    // Your app Token https://dashly.io/developers/webapi/#_1
$token = 'xxx'; 
    // Event object https://dashly.io/developers/objects/event/
$event = json_decode($_POST['event']); 
    // ConversationId
$conversationId = $event->{'props'}->{'$conversation_id'}; 
    // Operator id. You can find it in Settins - admins
$operator = 24574; 
$url = 'https://api.dashly.io/v1/conversations/'.$conversationId.'/assign?auth_token='.$token;
    // Post request https://dashly.io/developers/endpoints/conversations/assign/
$result = file_get_contents($url, false, stream_context_create(array( 
	'http' => array(
		'method'  => 'POST',
		'header'  => 'Content-type: application/json',
		'content' => '{"admin": "'.$operator.'"}'
	)
    )));

2) Example of assigning operator Andrew (id 24574) to all conversations from pages containing " /portfolio/”:

 

  // Your app Token https://dashly.io/developers/webapi/#_1
$token = 'app.7.4b3448df1b622483e88f53eec35cf9aca7d6ce0973ea2209'; 
    // Event object https://dashly.io/developers/objects/event/
$event = json_decode($_POST['event']); 
    // User objest https://dashly.io/developers/objects/user/
$user = json_decode($_POST['user']); 
    // ConversationId
$conversationId = $event->{'props'}->{'$conversation_id'}; 
    // Operator id. You can find it in Settins - admins
$operator = 24574; 
$url = 'https://api.dashly.io/v1/conversations/'.$conversationId.'/assign?auth_token='.$token;
    // Post request https://dashly.io/developers/endpoints/conversations/assign/
if (stristr($user->{'presence_details'}->{'url'},'/portfolio/')) { 
    $result = file_get_contents($url, false, stream_context_create(array( 
        'http' => array(
            'method'  => 'POST',
            'header'  => 'Content-type: application/json',
            'content' => '{"admin": "'.$operator.'"}'
        )
             ))); 
        }
Powered by Dashly