# 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.
```php
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.
```php
$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.**
```javascript
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.
```javascript
$(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.
```
Clic aquí
```
También puede usar la función `SBChat.open()`:
```
Clic aquí
```
---
## 👁️ 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()`.
```html
Clic aquí
```
---
## 🔄 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.
```javascript
$("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.
```javascript
$(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()`.
```javascript
$(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**
```javascript
(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.
```javascript
(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 `` cambiando 123 por el ID del agente.
```javascript
(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()`.
```javascript
$(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.
```php
$(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.