Haz clic en el botón "Configuración" del panel superior para acceder a la configuración general de la página.

Esto abre un menú con las siguientes secciones: General, Mensajeros, Analítica, Colores, Fuentes y HTML.

General

Información de la página

Nombre en la lista

Puedes ingresar cualquier texto aquí. Este nombre solo es visible para ti en la lista de páginas.

URL

Este campo te permite establecer un enlace personalizado (URL) para la página. Si se deja en blanco, se generará automáticamente un nombre único a partir de letras y números.

Requisitos:

Solo se pueden usar los siguientes caracteres:

  • Letras latinas (a–z)
  • Dígitos (0–9)
  • Símbolo de guion bajo (_)

El nombre debe ser único dentro de la plataforma. Si otro usuario ya lo ha tomado, no podrás usarlo de nuevo.

Puedes conectar tu propio dominio al sitio web.
Si no puedes cambiar el nombre en el enlace, significa que el nombre ya está en uso.
Puedes agregar caracteres adicionales o elegir uno diferente.

Nombre de la pestaña del navegador

Por defecto, el nombre de la pestaña del navegador coincide con el campo nombre del sitio, pero puedes personalizarlo para que sea más conciso o descriptivo.

El nombre de la pestaña del navegador se muestra en la barra de direcciones de la página.

Etiqueta

Una etiqueta es una marca que se envía a tu bot en el momento en que un usuario hace clic en el icono del mensajero. Te permite iniciar flujos específicos del bot al instante, sin esperar el primer mensaje del usuario.

Ingresa el nombre de la etiqueta en el campo "Disparador" de un bloque de disparador.

La etiqueta se asigna en la configuración de la página.

El valor especificado en el campo Etiqueta se guardará en la variable tag del cliente. Esta variable se puede usar posteriormente con fines analíticos.

Un mensaje que contenga esta etiqueta activará una acción específica en el embudo de tu bot, como enviar una respuesta o pasar al siguiente paso.

Ingresa una etiqueta, por ejemplo: welcome_offer

La etiqueta guardada será visible en el panel de información de la página.

Cómo usar una etiqueta de mensajero

Primero, asigna una etiqueta como main_flow en la configuración de tu sitio. Luego, ingresa esa misma etiqueta en el bloque de disparador de tu chatbot.

Configuración de un punto de entrada de chat

Establece un bloque específico (por ejemplo, el inicio de tu embudo principal) como punto de entrada para la lógica de tu bot. Cuando un usuario haga clic en el icono del mensajero en tu sitio, ingresará al mensajero y comenzará inmediatamente en este punto predefinido.

Para configurar bloques de formulario y botones de redirección de mensajero, consulta la guía "Respuestas de formulario" en Configuración de contenido.

Cuando un usuario hace clic en el botón, se le solicita que vaya directamente al mensajero.

  • El usuario pasa del sitio web al mensajero.
  • El usuario toca el botón "Iniciar" o "Lanzar" (según el dispositivo). Incluso si el usuario ha interactuado previamente con el bot, debe presionar este botón para iniciar el bot desde el sitio web; este es un requisito establecido por la plataforma de mensajería para los bots.
  • En lugar de /start, el bot recibirá la etiqueta especificada en la configuración del sitio web.
  • El cliente recibe el primer mensaje del embudo que se activa mediante la etiqueta especificada.
  • El perfil del cliente contiene la siguiente variable:

Para ver la analítica de una etiqueta, ve a la sección "Analítica" y abre la pestaña "Clientes".

A continuación, crea un nuevo widget donde especifiques la configuración principal:

  • Período de analítica: por ejemplo, "Último mes", "Todo el tiempo", etc.;
  • Nombre del widget: cualquier nombre conveniente;
  • Especifica una etiqueta para rastrear.

Luego, agrega un widget.

¡Hecho! Ahora puedes rastrear con qué frecuencia se lanza tu bot desde tu sitio usando una etiqueta.

La analítica integrada de MaviBot te permite rastrear chats, eficiencia de operadores, progreso del curso y métricas de clientes sin costo, eliminando la necesidad de herramientas externas.

Obtén más información en el artículo "Analítica de MaviBot".

Configuración de imagen

Imagen de vista previa

Esta es la miniatura o imagen de portada que se usa cuando se comparte tu sitio (por ejemplo, en redes sociales o aplicaciones de mensajería). Por defecto, usa la primera imagen de tu página. Para establecer una vista previa personalizada, sube la imagen elegida en este campo.

Configuración de protección del sitio / reCAPTCHA

Para configurar reCAPTCHA, debes proporcionar un par de claves (clave pública y clave secreta) en la configuración general de tu sitio web y habilitar la verificación de reCAPTCHA en la configuración de tu formulario.

Puedes elegir cualquier servicio CAPTCHA para proteger tu sitio web. En esta sección, veremos cómo instalar Google reCAPTCHA.

  1. Obtención de claves

Para comenzar, debes completar la información básica para obtener las claves: selecciona los tipos de CAPTCHA y agrega el dominio del sitio web donde se instalará la protección. Luego, haz clic en "Enviar".

  1. Ingreso de claves

A continuación, verás un par de claves que debes copiar y pegar en la configuración de la página de tu sitio web en MaviBot.

  1. Habilitación de CAPTCHA en la sección "Formulario"

Cómo crear y trabajar con la sección "Formulario" se explica en el artículo aquí.

Una vez configurada la sección Formulario, abre su configuración.

Haz clic en "Configuración" para abrir el menú lateral.

Allí verás una casilla de verificación para habilitar CAPTCHA.

Autenticación

Esta opción ayuda a filtrar a los usuarios que intentan acceder al sitio sin autorización. Sin embargo, es mejor habilitarla después de que todo lo demás esté configurado y estés seguro de que la configuración es correcta. Una vez habilitada, la única forma de acceder al sitio será a través del botón de autorización enviado por el bot.

Comencemos vinculando el dominio al bot de Telegram conectado a tu proyecto.

Paso 1: Ve a BotFather, donde creaste tu bot de Telegram.

Paso 2: Selecciona el bot de Telegram que deseas conectar al sitio web y haz clic en él.

Paso 3: Ve a la configuración del bot de Telegram.

Paso 4: En la configuración del bot, navega a Dominio.

Paso 5: Haz clic en "Establecer dominio".

Si ya has vinculado un dominio al bot, o si necesitas establecer un nuevo dominio para el mismo bot, el botón "Establecer dominio" se reemplazará por "Restablecer dominio".

Paso 6: Envía un dominio que quieras vincular al bot de Telegram: para hacerlo, escribe el dominio en el campo de entrada de mensaje y envíalo al bot.

Puede ser tu dominio personal, que recibiste de un registrador de nombres de dominio, o algo como mavitbot.ai

En esta etapa, la vinculación del dominio está completa.

Después de vincular el dominio al bot, activa la casilla de verificación "Requerir autorización a través de Telegram" en la configuración del formulario:

Configuración de interfaz y acceso

Acceso solo por listas

Esta opción te permite proporcionar acceso al sitio según la presencia del usuario en ciertas listas de tu proyecto.

Cómo ocultar la etiqueta "Hecho con MaviBot"

Para ocultar la etiqueta, simplemente marca esta casilla si es necesario.

Puedes eliminar la etiqueta "Hecho con MaviBot" en cualquier plan de pago. Agradecemos a todos los que mantienen la etiqueta "Hecho con MaviBot" en sus páginas.

HTML/CSS/JS

Puedes completar esta sección si es necesario.
Si estás familiarizado con CSS, puedes hacer que tu sitio web sea aún más atractivo visualmente. También puedes insertar aquí código de analítica, un píxel de Facebook y más.

¡TEN EN CUENTA!
Al copiar ejemplos de scripts, asegúrate de que si una etiqueta se abre, también debe cerrarse.
Por ejemplo: <script> ... </script>, <style> ... </style>

Cómo cambiar el enlace de la Política de privacidad

En el bloque de formulario de solicitud con botones de mensajero, puedes mostrar una casilla de verificación de Política de privacidad.
Por defecto, enlaza a la política de privacidad del constructor.

Puedes cambiar el enlace a tu propia página de Política de privacidad usando un script.

Agrega el script al campo "Código HTML (body)" en la sección CSS y JS.

<script>
document.getElementsByClassName('mavibot-privacy__link')[0].href = "enlace de política de privacidad";
</script>

Cómo deshabilitar la indexación de la página

Para deshabilitar la indexación de la página, agrega el script al campo de código HTML (head).

<meta name="robots" content="noindex, nofollow">

Cómo eliminar el botón de Facebook de tu página del sitio

Agrega el script al campo "Código HTML (body)" en la sección CSS y JS.

<script>
document.getElementsByClassName('vk_link')[0].remove()
</script>

Cómo eliminar el título de tu página del sitio

Agrega el script al campo "Código HTML (body)" en la sección CSS y JS.
Esto se aplica a versiones anteriores de mini páginas de aterrizaje.

<script>
document.getElementsByClassName('title_container')[0].remove()
</script>

Cómo editar el enlace del botón de Telegram.

Agrega el script al campo "Código HTML (body)" en la sección CSS y JS.

<script>
window.onload = function() {
    let button = document.querySelector('.tg_link')
    if (button) {
        button.setAttribute('data-url', 'el valor requerido')
        button.removeAttribute('onclick')
        let newUrl = button.getAttribute('data-url')
        button.addEventListener('click', () => {
            window.location.href = newUrl
        })
    }
}
</script>

Para otros mensajeros, reemplaza tg_link con insta_link, fb_link, etc.

Cómo actualizar el texto de un botón

Pega este código en el campo "Código HTML (body)" en la sección CSS y JS.

  1. Para mostrar el botón del mensajero, crea un bloque de formulario de solicitud con preguntas y especifica para qué mensajeros deben aparecer los botones

Establece el estilo de visualización del botón en "Icono con texto"

Más detalles sobre la sección Formulario se explican aquí. enlace

  1. En la sección Configuración del sitio, en la pestaña CSS y JS, pega el siguiente código en el campo "Configuración HTML" → "Código HTML (body)":

Este código cambiará el texto del botón para Telegram y Viber. Para otros mensajeros, agrega un código similar siguiendo el ejemplo.

Cómo alinear botones en una fila

Pega el siguiente script en el campo "Código JS" en la configuración principal de tu mini página de aterrizaje.

$(function() {
$('.link_group').css("flexWrap", 'noWrap')
})

Cómo cambiar un favicon

Agrega el script al campo "Código HTML (head)" en la sección CSS y JS.

Este código se puede usar para cambiar el favicon, el icono de un sitio web o página web.

Cómo pasar todas las variables/parámetros de URL al abrir tu sitio web

Debes colocar el script en todas las páginas de TU sitio web que contengan un enlace proxy. El script debe agregarse justo después de la etiqueta <body>.

Si estás usando tu propio dominio para enlaces proxy, debes reemplazar sbsite.pro con tu dominio.

Si tu sitio web contiene enlaces proxy a mensajeros desde la página del sitio, puedes agregar este script: pasará todas las variables utilizadas para abrir el sitio al bot.

<script>
var links = document.getElementsByTagName("a")
for (let i of links) {
    if (i.href.startsWith("https://mavibot.site/")) {
        if (i.href.split("?").length > 1) {
            i.href += "&" + location.search.split("?")[1]
        } else {
            i.href += location.search
        }
    }
}</script>

Cómo reenviar cookies de analítica al bot

El script debe colocarse en todas las páginas de TU sitio web que contengan un enlace proxy. Debe agregarse justo después de la etiqueta <body>.

Si usas tu propio dominio para enlaces proxy, debes reemplazar mavibot.ai con tu dominio.

Si necesitas pasar cookies de analítica al bot, agrega el siguiente script a tu sitio:

<script>
setTimeout(function() {
    var links = document.getElementsByTagName("a");
    var cookies = ['_fbc', '_fbp', '_ga', '_ym_uid', 'roistat_visit'];
    var cookies_string = '';

    cookies.forEach(function(cookie_name){
        let cookie_val = get_cookie(cookie_name);
        if (cookie_val !== undefined) {
            cookies_string += (cookies_string != '' ? "&" : '') + cookie_name + "='" + cookie_val + "'";
        }
    });

    for (let i of links) {
        if (i.href.startsWith("https://salebot.site/")) {
            if (i.href.split("?").length > 1) {
                i.href += "&" + cookies_string;
            } else {
                i.href += "?" + cookies_string;
            }
        }
    }

    function get_cookie(name) {
        let matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
        return matches ? decodeURIComponent(matches[1]) : undefined;
    }
}, 3000);
</script>

Cómo cambiar el enlace de la política de privacidad

En la pestaña CSS y JS, pega el siguiente código en el campo "Configuración HTML" → "Código HTML (body)":

Este script te permite reemplazar el enlace de la Política de privacidad por el tuyo propio.

<script>
document.getElementsByClassName('mavibot-privacy__link')[0].href = "enlace de política";
</script>

Mensajeros

Mensaje inicial de WhatsApp

El texto que ingreses aquí aparecerá automáticamente como borrador en su WhatsApp cuando hagan clic en el enlace desde tu sitio.

Simplemente pueden presionar "Enviar" en el mensajero.

  1. Crea un bloque "Inicio" en el constructor.
  2. Ingresa el texto de tu mensaje inicial en él.

Analítica

Habilita la configuración "Guardar datos de analítica para conversión" para preservar el seguimiento de conversiones de tu sitio.

Esto te permitirá monitorear las conversiones en la pestaña Analítica.

Exportación de sitio web / Importación de página

El constructor de sitios web te permite exportar e importar páginas completas. Esto es útil para transferir un sitio entre proyectos sin tener que reconstruirlo, conservando todo el contenido.

Cómo exportar/importar una página:

  1. Primero, asegúrate de que todos tus cambios estén guardados haciendo clic en el botón "Guardar".

Haz clic en "Exportar página" en el editor para exportar tu página.

Una vez que el archivo se haya descargado (lo verás en tu carpeta de descargas y recibirás una confirmación), ve a la configuración del sitio en tu proyecto de destino. Allí, haz clic en "Crear" para hacer una página idéntica.

Selecciona el archivo de página exportado que guardaste anteriormente. Una vez que la carga se confirme con una notificación, serás llevado directamente al editor para comenzar a trabajar en la página importada.

Si es necesario, realiza los ajustes requeridos y haz clic en el botón "Guardar".

¿Dónde encontrar el ID de la página?

El ID de la página del sitio de la lista de sitios se puede pasar a las funciones del bot, por ejemplo, para enviar un enlace a tu sitio a través del bot o para abrirlo como una mini aplicación en Telegram.

Lee más sobre Telegram WebApp en este artículo.

El número del sitio se asigna automáticamente con el símbolo #.

Puedes encontrar el ID de la página pasando el cursor sobre la página del sitio deseada.