Skip to main content

CASOS DE USO

📚

Ejemplos Casosreales de uso (Usede cases)las

Los casosAPIs de usoZampiBot. sonCombinan la API de JavaScript , la Web API y algunos ajustes del panel para resolver tareas concretas.

Todos los ejemplos delde mundoJavaScript realvan en la página donde instalaste el chat, después de cargar jQuery (ver «Configuración y uso» en la API. Pueden ser una combinaciónAPI de diferentes lenguajes, APIs y configuraciones. Están diseñados para completar tareas específicas.JavaScript).

👤 Registrar un usuario personalizado e iniciar su sesión automáticamente

EsteSirve casopara deque, usosi explicatu cómoweb registrarya manualmentesabe unquién usuarioes personalizadoel evisitante iniciar(por ejemplo, porque inició sesión antesen detu iniciartienda), el chat.chat Selo recomiendanreconozca lossin métodos:pedirle VARIABLEsus JS,datos. APIHay PHPtres yformas; APIte PHPrecomendamos +la JS1 +o WEB.la 2.

Método 1: VARIABLEvariable JSde JavaScript (la más sencilla)

Simplemente ingreseDefine la variable SB_DEFAULT_USER. Consulteen la documentaciónpágina antes del código de lainstalación APIdel JSchat, paracon máslos detallesdatos sobredel estausuario. variable.

El

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; dechat lo contrario,registra registre(o unlo nuevoreconoce) usuario.automáticamente y no le pide registrarse.

require_once($_SERVER["DOCUMENT_ROOT"]<script>
    .var "/chatbot.zampisoft.com/include/functions.php");
$active_userSB_DEFAULT_USER = sb_get_active_user();{
        if (!$active_user || $active_user["email"] !=first_name: "don.john@email.Juan",
        last_name: "Pérez",
        email: "juan@example.com"),
        extra: {
            $responsephone: = sb_add_user_and_login(["+573001234567", "profile_image"Phone"],
            =city: ["Bogotá", "City"]
        }
    };
</script>
<script id="chat-init" async src="https://chatbot.zampisoft.com/media/docs/user.png", 
        "first_name" =account/js/init.js?id=12345678"></script>
"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");
    }
}

Genera estos valores desde tu servidor con los datos del usuario que inició sesión en tu web.

Si el correo ya existe en ZampiBot (por ejemplo, el cliente ya escribió antes), el chat solo inicia su sesión si añades también password con la contraseña cifrada que guarda ZampiBot: es el campo password que devuelve la función get-user de la Web API. Sin ella, el usuario existente no se identifica. Por eso, si tus clientes vuelven a menudo, el método 2 suele ser más práctico.

Método 3:2: Web API PHP + JSJavaScript +(el WEBmás seguro)

Tu servidor consulta a ZampiBot si el usuario ya existe y escribe en la página el código para iniciar su sesión. La contraseña nunca llega al navegador.

1. HabilitarActiva la inicialización manualmanual. VayaEn el panel, ve a ConfiguraciónAjustes > Chat, marquemarca la opción Inicialización manual y guarde.guarda. Así el chat espera a que tu código lo inicie.

2. ImprimirGenera el código JSdesde paratu registrarservidor. eEste iniciar sesión Genere un código JS para insertarejemplo en todasPHP lasusa páginasla función zampibot_api() de la página Web API (con tu token de API, que contienennunca else chat.envía al navegador):

<?php
$existing_user_emailemail = 'don.john@email.juan@example.com';
$sb_user = supportboard_curl(zampibot_api(['function' => 'get-user-by', 'by' => 'email', 'value' => $existing_user_email]email]);
$code_login_existing_userlogin_existing_user = '';

if (isset(!empty($sb_user['success']) && !empty($sb_user['success'response'])) {
    $sb_user = $sb_user['response'];
    $code_login_existing_userlogin_existing_user = 'SBF.login("", "", "' . $sb_user['id'] . '", "' . $sb_user['token'] . '", () => { SBChat.initChat(); });';
}
$code?>
=<script>
'jQuery(document).on("SBReady", function () {
    SBF.getActiveUser(true, () => {
        if (!SBF.activeUser() ||&& (SBF.activeUser().email !== "'<?php .echo $existing_user_emailemail; . '?>")) {
            SBChat.initChat();
            return;
        }
        SBF.ajax({
            function: "add-user-and-login",
            settings: { profile_image: "https://chatbot.zampisoft.com/media/docs/user.png", first_name: "Don"Juan", last_name: "John"Pérez", email: "don.john@email.com"<?php echo $email; ?>" },
            settings_extra: { phone: ["123456789"+573001234567", "Phone"], city: ["London"Bogotá", "City"] }
        }, (response) => {
            if (!SBF.errorValidation(response)) {
                SBF.loginCookie(response[1]);
                SBF.activeUser(new SBUser(response[0]));
                            SBChat.initChat();
            } else if (response[1] == "duplicate-email") {
                '<?php .echo $code_login_existing_userlogin_existing_user; . '?>
            } else {
                SBChat.initChat();
            }
        });
    }
              });
});';
echo</script>
$code;

Método 4:3: APIsolo JAVASCRIPTJavaScript

1. HabilitarActiva la inicialización manualmanual. VayaEn el panel, ve a ConfiguraciónAjustes > Chat, marquemarca la opción Inicialización manual y guarde.guarda.

2. RegistrarRegistra al usuario e iniciarinicia sesiónsu sesión.

¡Advertencia!

Atención: Estecon este método no es seguro, la contraseña y los detallesdatos del usuario sonquedan visibles paraen todos.

el código de la página. Úsalo solo si eso no es un problema. 
jQuery(document).on("SBReady", function () {
    SBF.getActiveUser(true, () => {
        if (!SBF.activeUser() ||&& (SBF.activeUser().email !== "don.john@email.juan@example.com")) {
            SBChat.initChat();
            return;
        }
        SBF.ajax({
            function: "add-user-and-login",
            settings: { profile_image: "https://chatbot.zampisoft.com/media/docs/user.png", first_name: "Don"Juan", last_name: "John"Pérez", email: "don.john@email.juan@example.com", password: "12345678" },
            settings_extra: { phone: ["123456789"+573001234567", "Phone"], city: ["London"Bogotá", "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.juan@example.com", "12345678", "", "", () => { SBChat.initChat(); });
            } else {
                console.log(response);
            });
        } else {
            SBChat.initChat();
            }
        });
    });
});

📄 Mostrar el chat solo en algunas páginas específicas

Este1. casoActiva dela usoinicialización explicamanual. cómoEn mostrarel panel, ve a Ajustes > Chat, marca Inicialización manual y guarda.

2. Inicia el chat solo endonde páginasquieras. específicas.

Usa

EsteSBChat.initChat() caso de uso explica cómo mostrar el chat únicamente en páginas específicas.

1. Habilitary 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()dirección de la APIpágina 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.decidir:

$(jQuery(document).on("SBReady", function () {
    // Ejemplo: mostrar el chat solo en la página de contacto
    if (window.location.href.indexOf("/contact"contacto") > 0) {
        SBChat.initChat();
    }
    // Ejemplo: mostrar el chat solo en la página de inicio
    if (window.location.href == "https://example.com"tu-sitio.com/") {
        SBChat.initChat();
    }
});

Si solo quieres ocultarlo en unas pocas páginas, no necesitas la inicialización manual: añade <script>var SB_DISABLED = true;</script> antes del código de instalación en esas páginas.

🖱️ Abrir el chat alcon hacerun clicbotón propio

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ñadirAñade la clase sb-open-chat (o el ID sb-open-chat) a cualquier elemento (por ejemplo, un botón) para abrirbotón o cerrarenlace de tu página. Al pulsarlo, se abre el chatchat; cuandosi ya está abierto, se haga clic en ese elemento.cierra.

<a class="sb-open-chat">ClicHabla aquícon nosotros</a>

También puedepuedes usar la función SBChat.open():

<a href="javascript:SBChat.open()">ClicHabla aquícon nosotros</a>

👁️ Mostrar el chat alsolo hacercuando clicse pulsa un botón

EsteEl casobotón de uso muestra eldel chat solono despuésaparece dehasta que el usuariovisitante hacepulsa clictu enbotón; unentonces botón.se muestra y se abre.

1. HabilitarEn inicializaciónel manualpanel, yve aperturaa automática Habilite ConfiguraciónAjustes > Chat, >marca Inicialización manual y Configuración > Chat > Abrir automáticamente, y guarde.guarda.

2. MostrarUsa SBChat.initChat() en tu botón. En el chatmóvil, Use SBChat.initChat(). Para abrirlo en móviles, useañade también SBChat.open().:

<a href="javascript:SBChat.initChat();SBChat.open()">ClicHabla aquícon nosotros</a>

🔄 Mostrar y ocultar el chat alcon hacerun clicbotón

El primer clic muestra el chat,chat; al cerrarlo, el segundobotón lodel oculta.chat vuelve a ocultarse.

1. HabilitarEn lael inicializaciónpanel, manual Vayave a ConfiguraciónAjustes > Chat, marquemarca la opción Inicialización manual y guarde.guarda.

2. AñadirAñade eleste códigocódigo. deCambia eventos de clic Reemplace button-id conpor el ID de sutu botón.

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

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

🏢 Crear una conversación y asignar departamento

Este caso de uso explica cómo crear una nueva conversación, asignarle un departamento y

Crea abrirlauna conversación nueva en el chat. Si desea que todas las conversaciones se asignen automáticamente a un departamento fijo,concreto utilicey la variableabre. Los IDs de JavaScript

SB_DEFAULT_DEPARTMENT. Puede obtener los IDsdepartamentos están en ConfiguraciónAjustes > Misceláneas > Departamentos.

Si quieres que 1.todas Crearlas conversaciones que se creen desde una nuevapágina conversaciónvayan ya abrirlaun Creedepartamento, unaes nuevamás conversaciónsencillo condefinir la funciónvariable SBChat.newConversation()SB_DEFAULT_DEPARTMENT de(ver la API de JavaScriptJavaScript).

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 eleste fragmento de código a continuación,ejemplo la conversación solo se crea solo si el usuariovisitante no tiene otrasninguna. conversaciones.El quinto parámetro de SBChat.newConversation() es el departamento (aquí, el 2):

$(jQuery(document).on("SBInit", function () {
    if (SBF.activeUser() != false && SBF.activeUser().conversations.length == 0) {
        // IDestado, deusuario, departamentomensaje, esadjuntos, elDEPARTAMENTO, primeragente, argumentoal (2)terminar
        SBChat.newConversation(2, -1, "", [ ], 2, null, function (conversation) {
            SBChat.openConversation(conversation.id);
        });
    }
});

🕵️ Crear una conversación y asignarasignarla a un agente

Este caso de uso explica cómo crearCrea una nuevaconversación conversación,asignada asignarlea un agente existenteconcreto, yde permitirforma que solo ese agente la vea en el panel.

1. En el panel, ve a Ajustes > Misceláneas, activa Ocultar conversaciones de otros agentes y guarda. Con esta opción, cada agente ve solo las conversaciones asignadas a él.

2. Crea 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 pasepasando el ID del agente (aquí, el 445) encomo lossexto argumentosparámetro de laSBChat.newConversation(), función.y Después de crear la conversación, esta se abre con la función SBChat.openConversation().ábrela:

$(jQuery(document).on("SBInit", function () {
    if (SBF.activeUser() != false && SBF.activeUser().conversations.length == 0) {
        // IDestado, deusuario, agentemensaje, esadjuntos, eldepartamento, sextoAGENTE, argumentoal (445)terminar
        SBChat.newConversation(2, -1, "", [], null, 445, function (conversation) {
            SBChat.openConversation(conversation.id);
        });
    }
});

📌 ForzarUsar siempre una conversación específicaconcreta

EsteBusca casoentre delas usoconversaciones explicadel cómo establecervisitante una conversacióncon 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 elun 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,determinado; si la encuentra, la abre;abre, dey losi contrario,no, crea una nueva conversación con elese títulotítulo. buscado. Este caso de uso se puede utilizar en diferentes escenarios,Sirve, por ejemplo, sipara desea obligar al usuario a utilizarusar una conversación diferente para distintas páginas.

1. Inserte este código JavaScriptdistinta en sucada sitiosección webde tu web.

(function ($) {
    jQuery($(document).on("SBInit", function () {
        if (!SBF.activeUser()) return;
        let conversation_title = "CONVERSATION-NAME"NOMBRE-DE-LA-CONVERSACION";
        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));

Si tienes activado Ajustes > Chat > Permitir solo una conversación, new-conversation devuelve la conversación abierta que ya tenga el visitante en lugar de crear otra.

🏢 ForzarUsar siempre un departamento específicoconcreto

Busca una conversación condel visitante en el departamento deseado,indicado; si la encuentraencuentra, la abre, y si no, crea una nueva.nueva Reemplaceen ese departamento. Cambia YOUR-DEPARTMENT-IDID-DEL-DEPARTAMENTO conpor el ID del departamento.

(function ($) {
    jQuery($(document).on("SBInit", function () {
        if (!SBF.activeUser()) return;
        let active_department = "YOUR-DEPARTMENT-ID"ID-DEL-DEPARTAMENTO";
        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) {
                let id = conversations[i].id;
                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));

🕵️ ForzarUsar siempre un agente específicoconcreto

Busca una conversación condel elvisitante asignada al agente deseado (definidoindicado en SB_DEFAULT_AGENT),; si la encuentraencuentra, la abre, y si no, crea una nueva.nueva asignada a ese agente.

1. Insertar el código JavaScript En cada página, inserteantes del código de instalación del chat, añade <script>var SB_DEFAULT_AGENT = 123123;</script> cambiandoy cambia 123 por el ID del agente.

2. Añade este código:

(function ($) {
    if (typeof SB_DEFAULT_AGENT != 'undefined'"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) {
                    let id = conversations[i].id;
                    setTimeout(() => { SBChat.openConversation(conversations[i].id); }, 300);
                    return;
                }
            }
            }
            $('".sb-list'list").sbLoading(true);
            SBChat.open(false);
            SBF.ajax({
                function: "new-conversation",
                agent_id: SB_DEFAULT_AGENT
            }, (response) => {
                SBChat.clear();
                $('".sb-list'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

Envía deun mensaje del bot al visitante y abre el chat. Antes comprueba con searchMessages() 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 elese mensaje no estáesté ya 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, sipara no lorepetirlo está,en ábralocada con la función SBChat.open().visita.

$(jQuery(document).on("SBInit", function () {
    let message = "¿DeseaQuieres comprar el producto de esta página?";
    if (SBChat.conversation == false || SBChat.conversation.searchMessages(message).length == 0) {
        SBChat.sendMessage(SBF.setting("bot-id"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)al bajar por la página

Muestra un mensaje emergente junto al botón del chat cuando el usuariovisitante desplazabaja 500 píxeles por la páginapágina. hastaEl ciertamensaje posición;emergente ensolo estese 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-upve 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.cerrado.

$(jQuery(document).on("SBInit", function () {
    var showedshown = false;
    $(jQuery(window).scroll(function () {
        varif scroll = $(jQuery(window).scrollTop();
        if (scroll > 500 && !showed)shown) {
            SBChat.popup(false, { title: "You¿Tienes reached 500 px!dudas?", message: "InsertEscríbenos herey yourte message.ayudamos." });
            showedshown = true;
        }
    });
});

Si tiene configurado un dominio de cookie, añada domain=SU-VALOR a la cadena de la cookie.