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();
}
});
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();
}
});
}
});
Display a pop-up message when the user scroll the page
This use case explains how to display a pop-up message when the user scroll the page to a certain position, in this example when the page scroll reaches 500 px.
1 Check the page scroll and display the pop-up
Check the page scroll via JavaScript and display the pop-up with the function popup() of the JavaScript API .
$(document).on("SBInit", function () {
var showed = false;
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll > 500 && !showed) {
SBChat.popup(false, { title: "You reached 500 px!", message: "Insert here your message." });
showed = true;
}
});
});