CASOS DE USO
📚 Casos de uso (Use cases)
Los casos de uso son ejemplos del mundo real de la API. Pueden ser una combinación de diferentes lenguajes, APIs y configuraciones. Están diseñados para completar tareas específicas.
👤 Registrar un usuario personalizado e iniciar sesión
Este caso de uso explica cómo registrar manualmente un usuario personalizado e iniciar sesión antes de iniciar el chat. Se recomiendan los métodos: VARIABLE JS, API PHP y API PHP + JS + WEB.
Método 1: VARIABLE JS
Simplemente ingrese la variable SB_DEFAULT_USER. Consulte la documentación de la API JS para más detalles sobre esta variable.
Método 2: API PHP
1. Registrar al usuario e iniciar sesión Verifique si un usuario activo ya ha iniciado sesión comprobando el correo electrónico. Si es así, inicie sesión; de lo contrario, registre un nuevo usuario.
require_once($_SERVER["DOCUMENT_ROOT"] . "/chatbot.zampisoft.com/include/functions.php");
$active_user = sb_get_active_user();
if (!$active_user || $active_user["email"] != "don.john@email.com") {
$response = sb_add_user_and_login([
"profile_image" => "https://chatbot.zampisoft.com/media/docs/user.png",
"first_name" => "Don",
"last_name" => "John",
"email" => "don.john@email.com",
"password" => "12345678"
], [
"phone" => ["123456789", "Phone"],
"city" => ["London", "City"]
]);
if ($response == "duplicate-email") {
$response = sb_login("don.john@email.com", "12345678");
}
}Método 3: API PHP + JS + WEB
1. Habilitar la inicialización manual Vaya a Configuración > Chat, marque la opción Inicialización manual y guarde.
2. Imprimir el código JS para registrar e iniciar sesión Genere un código JS para insertar en todas las páginas que contienen el chat.
$existing_user_email = 'don.john@email.com';
$sb_user = supportboard_curl(['function' => 'get-user-by', 'by' => 'email', 'value' => $existing_user_email]);
$code_login_existing_user = '';
if (isset($sb_user['success']) && $sb_user['success']) {
$sb_user = $sb_user['response'];
$code_login_existing_user = 'SBF.login("", "", "' . $sb_user['id'] . '", "' . $sb_user['token'] . '", () => { SBChat.initChat(); });';
}
$code = 'jQuery(document).on("SBReady", function () {
SBF.getActiveUser(true, () => {
if (!SBF.activeUser() || (SBF.activeUser().email != "' . $existing_user_email . '")) {
SBF.ajax({
function: "add-user-and-login",
settings: { profile_image: "https://chatbot.zampisoft.com/media/docs/user.png", first_name: "Don", last_name: "John", email: "don.john@email.com" },
settings_extra: { phone: ["123456789", "Phone"], city: ["London", "City"] }
}, (response) => {
if (!SBF.errorValidation(response)) {
SBF.loginCookie(response[1]);
SBF.activeUser(new SBUser(response[0]));
SBChat.initChat();
} else if (response[1] == "duplicate-email") {
' . $code_login_existing_user . '
} else {
SBChat.initChat();
}
});
}
});
});';
echo $code;Método 4: API JAVASCRIPT
1. Habilitar la inicialización manual Vaya a Configuración > Chat, marque la opción Inicialización manual y guarde.
2. Registrar al usuario e iniciar sesión ¡Advertencia! Este método no es seguro, la contraseña y los detalles del usuario son visibles para todos.
jQuery(document).on("SBReady", function () {
SBF.getActiveUser(true, () => {
if (!SBF.activeUser() || (SBF.activeUser().email != "don.john@email.com")) {
SBF.ajax({
function: "add-user-and-login",
settings: { profile_image: "https://chatbot.zampisoft.com/media/docs/user.png", first_name: "Don", last_name: "John", email: "don.john@email.com", password: "12345678" },
settings_extra: { phone: ["123456789", "Phone"], city: ["London", "City"] }
}, (response) => {
if (!SBF.errorValidation(response)) {
SBF.loginCookie(response[1]);
SBF.activeUser(new SBUser(response[0]));
SBChat.initChat();
} else if (response[1] == "duplicate-email") {
SBF.login("don.john@email.com", "12345678", "", "", () => { SBChat.initChat(); });
} else console.log(response);
});
} else {
SBChat.initChat();
}
});
});📄 Mostrar el chat solo en páginas específicas
Este caso de uso explica cómo mostrar el chat solo en páginas específicas.
Este caso de uso explica cómo mostrar el chat únicamente en páginas específicas.
1. Habilitar la inicialización manual Vaya a Configuración > Chat, marque la opción Inicialización manual y guarde.
2. Inicializar el chat Inicialice el chat con la función SBChat.initChat() de la API de JavaScript. Puede utilizar la variable JS window.location.href para obtener la URL y mostrar el chat solo si la URL coincide con sus criterios. Tenga en cuenta que también puede utilizar la variable JavaScript SB_DISABLED = true para deshabilitar el chat en páginas específicas.
$(document).on("SBReady", function () {
// Ejemplo: mostrar el chat solo en la página de contacto
if (window.location.href.indexOf("/contact") > 0) {
SBChat.initChat();
}
// Ejemplo: mostrar el chat solo en la página de inicio
if (window.location.href == "https://example.com") {
SBChat.initChat();
}
});🖱️ Abrir el chat al hacer clic
Este caso de uso explica cómo abrir el chat solo cuando el usuario hace clic en un botón. La forma más sencilla es añadir la clase o ID sb-open-chat a cualquier elemento (por ejemplo, un botón) para abrir o cerrar el chat cuando se haga clic en ese elemento.
<a class="sb-open-chat">Clic aquí</a>También puede usar la función SBChat.open():
<a href="javascript:SBChat.open()">Clic aquí</a>👁️ Mostrar el chat al hacer clic
Este caso de uso muestra el chat solo después de que el usuario hace clic en un botón.
1. Habilitar inicialización manual y apertura automática Habilite Configuración > Chat > Inicialización manual y Configuración > Chat > Abrir automáticamente, y guarde.
2. Mostrar el chat Use SBChat.initChat(). Para abrirlo en móviles, use también SBChat.open().
<a href="javascript:SBChat.initChat();SBChat.open()">Clic aquí</a>🔄 Mostrar y ocultar el chat al hacer clic
El primer clic muestra el chat, el segundo lo oculta.
1. Habilitar la inicialización manual Vaya a Configuración > Chat, marque la opción Inicialización manual y guarde.
2. Añadir el código de eventos de clic Reemplace button-id con el ID de su botón.
$("body").on("click", "#button-id", function () {
SBChat.initChat();
$(".sb-chat-btn").show();
setTimeout(function () {
SBChat.open();
}, 500);
});
$("body").on("click", ".sb-chat .sb-chat-btn", function () {
$(this).hide();
});🏢 Crear conversación y asignar departamento
Este caso de uso explica cómo crear una nueva conversación, asignarle un departamento y abrirla en el chat. Si desea que todas las conversaciones se asignen automáticamente a un departamento fijo, utilice la variable de JavaScript SB_DEFAULT_DEPARTMENT. Puede obtener los IDs en Configuración > Misceláneas > Departamentos.
1. Crear una nueva conversación y abrirla Cree una nueva conversación con la función SBChat.newConversation() de la API de JavaScript y pase el ID del departamento 2 en los argumentos de la función. Después de crear la conversación, esta se abre con la función SBChat.openConversation(). En el fragmento de código a continuación, la conversación se crea solo si el usuario no tiene otras conversaciones.
$(document).on("SBInit", function () {
if (SBF.activeUser() != false && SBF.activeUser().conversations.length == 0) {
// ID de departamento es el primer argumento (2)
SBChat.newConversation(2, -1, "", [ ], 2, null, function (conversation) {
SBChat.openConversation(conversation.id);
});
}
});🕵️ Crear conversación y asignar agente
Este caso de uso explica cómo crear una nueva conversación, asignarle un agente existente y permitir que solo ese agente vea la conversación en el área de administración.
1. Habilitar el enrutamiento Vaya a Configuración > Misceláneas, marque la opción Enrutamiento y guarde.
2. Crear una nueva conversación y abrirla Cree una nueva conversación con la función SBChat.newConversation() de la API de JavaScript y pase el ID del agente 445 en los argumentos de la función. Después de crear la conversación, esta se abre con la función SBChat.openConversation().
$(document).on("SBInit", function () {
if (SBF.activeUser() != false && SBF.activeUser().conversations.length == 0) {
// ID de agente es el sexto argumento (445)
SBChat.newConversation(2, -1, "", [], null, 445, function (conversation) {
SBChat.openConversation(conversation.id);
});
}
});📌 Forzar una conversación específica
Este caso de uso explica cómo establecer una conversación específica cuando se cumple una condición y obliga al usuario a utilizar únicamente dicha conversación mientras la condición siga siendo válida.
El siguiente código utiliza el título de la conversación para identificar cuál es la conversación correcta a utilizar: busca la conversación específica usando su título y, si la encuentra, la abre; de lo contrario, crea una nueva conversación con el título buscado. Este caso de uso se puede utilizar en diferentes escenarios, por ejemplo, si desea obligar al usuario a utilizar una conversación diferente para distintas páginas.
1. Inserte este código JavaScript en su sitio web
(function ($) {
jQuery(document).on("SBInit", function () {
let conversation_title = "CONVERSATION-NAME";
let conversations = SBF.activeUser().conversations;
if (conversations) {
for (var i = 0; i < conversations.length; i++) {
if (conversations[i].get("title") == conversation_title) {
SBChat.openConversation(conversations[i].id);
return;
}
}
}
SBF.ajax({
function: "new-conversation",
title: conversation_title
}, (response) => {
SBChat.setConversation(new SBConversation([], response["details"]));
});
});
}(jQuery));🏢 Forzar un departamento específico
Busca una conversación con el departamento deseado, si la encuentra la abre, si no, crea una nueva. Reemplace YOUR-DEPARTMENT-ID con el ID del departamento.
(function ($) {
jQuery(document).on("SBInit", function () {
let active_department = "YOUR-DEPARTMENT-ID";
let conversations = SBF.activeUser().conversations;
SBChat.default_department = active_department;
if (conversations) {
for (var i = 0; i < conversations.length; i++) {
if (conversations[i].get("department") == active_department) {
setTimeout(() => { SBChat.openConversation(conversations[i].id) }, 300);
return;
}
}
}
SBChat.open(false);
SBF.ajax({
function: "new-conversation",
department: active_department
}, (response) => {
SBChat.setConversation(new SBConversation([], response["details"]));
});
});
}(jQuery));🕵️ Forzar un agente específico
Busca una conversación con el agente deseado (definido en SB_DEFAULT_AGENT), si la encuentra la abre, si no, crea una nueva.
1. Insertar el código JavaScript En cada página, inserte <script>var SB_DEFAULT_AGENT = 123</script> cambiando 123 por el ID del agente.
(function ($) {
if (typeof SB_DEFAULT_AGENT != 'undefined') {
jQuery(document).on("SBInit", function () {
if (!SBF.activeUser()) return;
let conversations = SBF.activeUser().conversations;
if (conversations) {
for (var i = 0; i < conversations.length; i++) {
if (conversations[i].get("agent_id") == SB_DEFAULT_AGENT) {
setTimeout(() => { SBChat.openConversation(conversations[i].id) }, 300);
return;
}
}
}
$('.sb-list').sbLoading(true);
SBChat.open(false);
SBF.ajax({
function: "new-conversation",
agent_id: SB_DEFAULT_AGENT
}, (response) => {
SBChat.clear();
$('.sb-list').sbLoading(false);
SBChat.setConversation(new SBConversation([], response["details"]));
});
});
}
}(jQuery));📨 Enviar mensaje y abrir chat
Este caso de uso explica cómo enviar un nuevo mensaje y abrir el chat después de que el mensaje haya sido enviado.
1. Enviar el mensaje y abrir el chat Verifique si el mismo mensaje ya existe en la conversación con el método searchMessages() de la API de JavaScript. Si el mensaje no está en la conversación, envíe un nuevo mensaje con la función SBChat.sendMessage(). Después de enviar el mensaje, abra la conversación con la función SBChat.openConversation(), verifique si el chat está abierto y, si no lo está, ábralo con la función SBChat.open().
$(document).on("SBInit", function () {
let message = "¿Desea comprar el producto de esta página?";
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();
}
});
}
});📜 Mostrar pop-up al hacer scroll
Este caso de uso explica cómo mostrar un mensaje emergente (pop-up) cuando el usuario desplaza la página hasta cierta posición; en este ejemplo, cuando el desplazamiento de la página alcanza los 500 px.
1. Comprobar el desplazamiento de la página y mostrar el pop-up Verifique el desplazamiento de la página mediante JavaScript y muestre el pop-up con la función popup() de la API de JavaScript.🎨 Mostrar chat en admin de WordPress
Muestra el chat dentro del área de administración de WordPress e identifica automáticamente al usuario conectado.
1. Editar functions.php Agregue el siguiente código al final del archivo functions.php de su tema.
$(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;
}
});
});Si tiene configurado un dominio de cookie, añada domain=SU-VALOR a la cadena de la cookie.