Examples

Use cases

Use cases are real-world API examples. They can be a combination of different languages, APIs, and settings. They are built to complete specific tasks.


Register a user, log in it, and start the chat

This use case explains how to manually register a user, log in it, and start the chat.


1 Enable the manual initialization

Go to Settings > Chat, check the option Manual initialization, and save.

2 Register the user and login it

Register the user and get the ID with the function sb_add_user_and_login() of the PHP API.

                                require('supportboard/include/functions.php');
                                sb_add_user_and_login([ "profile_image" => "https://board.support/media/docs/user.png", "first_name" => "Don", "last_name" => "John", "email" => "don.john@email.com", "password" => "12345678"], ["phone" => ["123456789", "Phone"], "city" => ["London", "City"]]);
                            

3 Initialize the chat

Initialize the chat with the function SBChat.initChat() of the JavaScript API .

                                $(document).on("SBReady", function () {
                                    SBChat.initChat();
                                });
                            

Display the chat only on specific pages

This use case explains how to display the chat only on specific pages.


1 Enable the manual initialization

Go to Settings > Chat, check the option Manual initialization, and save.

2 Initialize the chat

Initialize the chat with the function SBChat.initChat() of the JavaScript API . You can use the JS variable window.location.href to get the URL and display the chat only if the URL matches your criteria.

                                $(document).on("SBReady", function () {
                                    // Example: display the chat only on the contact page
                                    if (window.location.href.indexOf('/contact') > 0) {
                                        SBChat.initChat();
                                    }

                                    // Example: display the chat only on the home page
                                    if (window.location.href == "https://example.com") {
                                        SBChat.initChat();
                                    }
                                });
                            

Display the chat on click

This use case explains how to display the chat only after the user click a button, and hide it again when the user close it.


1 Enable the manual initialization

Go to Settings > Chat, check the option Manual initialization, and save.

2 Add the click events code

The first click event shows the chat, the second hide it. Replace button-id with the ID of the your HTML button or element.

                                $("body").on("click", "#button-id", function () {
                                    SBChat.initChat();
                                    $(".sb-chat-btn").show();
                                    setTimeout(function () {
                                        SBChat.open();
                                     }, 500);
                                });

                                $("body").on("click", ".sb-chat:not(.sb-active) .sb-chat-btn", function () {
                                    $(this).hide();
                                });
                            

Create a new conversation and assign a department to it

This use case explains how to create a new conversation, assign a department to it, and open it in the chat. If you want that all the conversations are automatically assigned to a fixed department use the JavaScript variable SB_DEFAULT_DEPARTMENT. You can get the IDs from Settings > Miscellaneous > Departments.


1 Create a new conversation, and open it

Create a new conversation with the function SBChat.newConversation() of the JavaScript API and pass the department ID 2 in the function' arguments. After the conversation is created, it's opened with the function SBChat.openConversation() . In the code snippet below, the conversation is created only if the user has no other conversations.

                                $(document).on("SBInit", function () {
                                    if (SBF.activeUser() != false && SBF.activeUser().conversations.length == 0) {
                                        SBChat.newConversation(2, -1, "", [], 2, null, function (conversation) {
                                            SBChat.openConversation(conversation.id);
                                        });
                                    }
                                });
                            

Create a new conversation and assign it to an agent

This use case explains how to create a new conversation, assign an existing agent to it, and allow only that agent to see the conversation in the administration area.


1 Enable the routing

Go to Settings > Miscellaneous, check the option Routing, and save.

2 Create a new conversation, and open it

Create a new conversation with the function SBChat.newConversation() of the JavaScript API and pass the agent ID 445 in the function' arguments. After the conversation is created, it's opened with the function SBChat.openConversation() .

                                $(document).on("SBInit", function () {
                                    if (SBF.activeUser() != false && SBF.activeUser().conversations.length == 0) {
                                        SBChat.newConversation(2, -1, "", [], null, 445, function (conversation) {
                                            SBChat.openConversation(conversation.id);
                                        });
                                    }
                                });
                            

Send a new message and open the chat

This use case explains how to send a new message, and open the chat after the message has been sent.


1 Send the message and open the chat

Check if the same message is already in the conversation with the method searchMessages() of the JavaScript API . If the message is not in the conversation send a new message with the function SBChat.sendMessage() . After the message is sent, open the conversation with the function SBChat.openConversation() , check if the chat is open, and if not, open it with the function SBChat.open() .

                                $(document).on("SBInit", function () {
                                    let message = "Do you want to buy the product on this page?";
                                    if (SBChat.conversation == false || SBChat.conversation.searchMessages(message).length == 0) {
                                        SBChat.sendMessage(SBF.setting("bot-id"), message, [], function (response) {
                                            SBChat.openConversation(response['conversation_id']);
                                            if (!SBChat.chat_open) {
                                                SBChat.open();
                                            }
                                        });
                                    }
                                });