/* Base styles */
:root {
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.hero-container {
    text-align: center;
    padding: 4rem 1rem;
    background-color: #fafafa;
}

.hero-title {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #111827;
}

.hero-description {
    font-size: 1.125rem;
    color: #4b5563;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.search-input {
    width: 100%;
    max-width: 500px;
    padding: 0.75rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    font-size: 1rem;
    margin-bottom: 2rem;
    cursor: pointer;
    background-color: white;
    transition: all 0.2s ease;
}

.search-input:hover {
    border-color: #d1d5db;
    background-color: #f9fafb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.search-input:focus {
    outline: none;
    border-color: #d1d5db;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.explore-link {
    color: #111827;
    text-decoration: none;
    font-weight: 500;
}

.explore-link:hover {
    text-decoration: underline;
}

.section-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    color: #111827;
    margin: 4rem 0 2rem;
}

.tools-guides-container {
    margin: 6rem auto 8rem;
    max-width: 70rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.tools-guides-header {
    text-align: center;
    margin-bottom: 3rem;
}

.tools-guides-grid {
    width: 100%;
}

.hr {
    border-color: rgb(var(--gray-100));
    border-top-width: 1px;
    margin-top: 3em;
    margin-bottom: 3em;
}

.loom-video {
    position: relative;
    padding-bottom: 62.5%;
    height: 0;
}

.loom-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

a.article-link {
    color: var(--tw-prose-links);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 2px solid rgb(var(--primary-dark));
    transition: border-color 0.2s ease;
    position: relative;
    display: inline-flex;
    align-items: center;
}

a.article-link p {
    margin: 0;
}

a.article-link svg {
    width: 14px !important;
    height: 14px !important;
    margin-left: 4px;
}

a.article-link:hover {
    color: rgb(var(--primary-dark));
    border-color: transparent;
    background-color: rgba(var(--primary-dark), 0.1);
    transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}


.step-container {
    margin-bottom: 2rem;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.step-container h3 {
    margin-top: 0;
}

.step-container.active {
    display: block;
}

.step-container.current {
    opacity: 1;
    transform: translateY(0);
}

.step-container.completed {
    border-color: #10B981;
}

.step-navigation {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 2rem;
    gap: 0.5rem;
}

.step-indicator {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: #f3f4f6;
    border: 2px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.step-indicator:hover {
    border-color: #d1d5db;
    background-color: #e5e7eb;
}

.step-indicator.current {
    background-color: #10B981;
    border-color: #059669;
    color: white;
}

.step-indicator.completed {
    background-color: #D1FAE5;
    border-color: #10B981;
    color: #059669;
}

.step-indicator.completed:hover {
    background-color: #A7F3D0;
}

.choice-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.choice-button {
    padding: 0.5rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.25rem;
    background-color: white;
    cursor: pointer;
    transition: all 0.2s;
}

.choice-button:hover {
    background-color: #f9fafb;
    border-color: #d1d5db;
}

.choice-button.yes {
    background-color: #10B981;
    color: white;
    border-color: #059669;
}

.choice-button.no {
    background-color: #EF4444;
    color: white;
    border-color: #DC2626;
}

.choice-button.yes:hover {
    background-color: #059669;
}

.choice-button.no:hover {
    background-color: #DC2626;
}

.result-message {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 0.25rem;
    display: none;
}

.result-message.success {
    background-color: #D1FAE5;
    color: #065F46;
    display: block;
}

.result-message.error {
    background-color: #FEE2E2;
    color: #991B1B;
    display: block;
}

.sub-steps {
    margin-top: 1rem;
    display: none;
}

.sub-steps.active {
    display: block;
}

.checkbox-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    padding: 0.75rem;
    border-radius: 0.25rem;
    border: 1px solid #e5e7eb;
    transition: all 0.2s;
}

.checkbox-item:hover {
    border-color: #d1d5db;
}

.checkbox-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.toggle-buttons {
    display: flex;
    gap: 0.5rem;
}

.toggle-button {
    padding: 0.25rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.25rem;
    background-color: white;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.toggle-button.selected {
    background-color: #10B981;
    color: white;
    border-color: #059669;
}

.toggle-button.selected.no {
    background-color: #EF4444;
    border-color: #DC2626;
}

.sub-step-help {
    display: none;
    margin-top: 0.5rem;
    padding: 0.75rem;
    background-color: #FEF3C7;
    border-radius: 0.25rem;
    /* font-size: 0.875rem; */
    color: #92400E;
}

.sub-step-help.active {
    display: block;
}

.sub-step-help a {
    color: #92400E;
}

.sub-step-help a:hover {
    color: #78350F;
}

.progress-indicator {
    margin-top: 1rem;
    height: 0.5rem;
    background-color: #e5e7eb;
    border-radius: 0.25rem;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background-color: #10B981;
    transition: width 0.3s ease;
    width: 0%;
}

.sub-steps-summary {
    margin-top: 1rem;
    padding: 0.75rem;
    border-radius: 0.25rem;
    background-color: #f9fafb;
    display: none;
}

.sub-steps-summary.complete {
    display: block;
    background-color: #D1FAE5;
    color: #065F46;
}

"use client";

const enSettings = {
  baseSettings: {
    apiKey: "9b910dd249a6045ba619d6b1d547842491f7e9afc30faad8",
    primaryBrandColor: "#B286FD",
    organizationDisplayName: "Treble",
  },
  searchSettings: {
    placeholder: 'Search...',
  },
  aiChatSettings: {
    chatSubjectName: "Treble",
    aiAssistantAvatar:
      "https://treble.ai/wp-content/uploads/2021/10/Artboard-1.webp",
    introMessage: undefined,
    placeholder: 'How do I get started?',
    exampleQuestions: [
        "How do I get started?",
        "How do I connect my Whatsapp line to Treble?",
        "How do I connect HubSpot to Treble?",
    ],
    exampleQuestionsLabel: undefined,
    toolbarButtonLabels: undefined,
    getHelpOptions: [
      {
        name: "Help Center",
        icon: {
          builtIn: "IoHelpBuoyOutline",
        },
        action: {
          type: "open_link",
          url: "https://support-treble.atlassian.net/servicedesk/customer/portals",
        },
      },
    ],
  },
  label: 'Ask AI',
  askAILabel: 'Ask AI',
  searchLabel: 'Search',
};

const esSettings = {
  baseSettings: {
    apiKey: "6b3fe3c67a40c0bc4ae4435cdaafbca0260fff7ac20aed35",
    primaryBrandColor: "#B286FD",
    organizationDisplayName: "Treble",
  },
  searchSettings: {
    placeholder: 'Buscar...', // Search...
  },
  aiChatSettings: {
    chatSubjectName: "Treble",
    aiAssistantAvatar:
      "https://treble.ai/wp-content/uploads/2021/10/Artboard-1.webp",
    introMessage:
      'Hola! \n\n Soy un asistente de IA entrenado en documentación, artículos de ayuda y otro contenido. \n\n Pregúntame cualquier cosa sobre `Treble`.', // Hi! I'm an AI assistant trained on documentation, help articles, and other content. Ask me anything about Treble.
    placeholder: '¿Cómo empiezo?', // How do I get started?
    exampleQuestionsLabel: 'preguntas de ejemplo', // example questions
    toolbarButtonLabels: {
      stop: 'Detener', // Stop
      clear: 'Limpiar', // Clear
      share: 'Compartir', // Share
      getHelp: 'Obtener ayuda', // Get help
    },
    exampleQuestions: [
        "¿Cómo puedo empezar a usar Treble?",
        "¿Cómo conecto mi linea de Whatsapp a Treble?",
        "¿Cómo puedo conectar HubSpot a Treble?",
    ],
    getHelpOptions: [
      {
        name: "Centro de ayuda",
        icon: {
          builtIn: "IoHelpBuoyOutline",
        },
        action: {
          type: "open_link",
          url: "https://support-treble.atlassian.net/servicedesk/customer/portals",
        },
      },
    ],
  },
  label: 'Preguntar a la IA', // chat button label (Ask AI)
  askAILabel: 'Preguntar a la IA', // Ask AI
  searchLabel: 'Buscar', // Search
};

const ptSettings = {
  baseSettings: {
    apiKey: "2b2eddaa4f14b2ea4a3f3a731f4c5ea3934d0ca831b1695f",
    primaryBrandColor: "#B286FD",
    organizationDisplayName: "Treble",
  },
  searchSettings: {
    placeholder: 'Pesquisar...', // Search...
  },
  aiChatSettings: {
    chatSubjectName: "Treble",
    aiAssistantAvatar:
      "https://treble.ai/wp-content/uploads/2021/10/Artboard-1.webp",
    introMessage:
    "Olá!\n\n Sou um assistente de IA treinado em documentação, artigos de ajuda e outros conteúdos.\n\n Pergunta-me qualquer coisa sobre `Treble`.", // Hi! I'm an AI assistant trained on documentation, help articles, and other content. Ask me anything about Treble.
    placeholder: "Como começo?", // How do I get started?
    exampleQuestionsLabel: 'perguntas de exemplo', // example questions
    toolbarButtonLabels: {
      stop: "Parar",     // Stop
      clear: "Limpar",   // Clear
      share: "Partilhar",// Share
      getHelp: "Obter ajuda", // Get help
    },
    exampleQuestions: [
        "Como posso começar a usar Treble?",
        "Como posso conectar a minha linha de Whatsapp ao Treble?",
        "Como posso conectar o HubSpot ao Treble?",
    ],
    getHelpOptions: [
      {
        name: "Centro de ajuda",
        icon: {
          builtIn: "IoHelpBuoyOutline",
        },
        action: {
          type: "open_link",
          url: "https://support-treble.atlassian.net/servicedesk/customer/portals",
        },
      },
    ],
  },
  label: "Perguntar à IA",   // chat button label (Ask AI)
  askAILabel: "Perguntar à IA", // Ask AI
  searchLabel: "Pesquisar",  // Search
};

const settingsByLang = {
  en: enSettings,
  es: esSettings,
  pt: ptSettings,
};

function loadScript(url, callback) {
  const script = document.createElement("script");
  script.src = url;
  script.type = "text/javascript";
  script.onload = callback;
  document.head.appendChild(script);
}


loadScript(
  "https://cdn.jsdelivr.net/npm/@inkeep/cxkit-mintlify@0.5/dist/index.js",
  () => {
 
    const html = document.documentElement;
    let currentLang = html.getAttribute("lang");

    const settings = settingsByLang[currentLang] || esSettings;
    // Initialize the UI components
    let searchAndChat = Inkeep.ModalSearchAndChat(settings); // Search Bar
    let chatButton = Inkeep.ChatButton(settings); // 'Ask AI' button

    // listen to changes in the lang attribute on the html element
    const observer = new MutationObserver((mutations) => {
      for (const m of mutations) {
        if (m.type === "attributes" && m.attributeName === "lang") {
          const newLang = html.getAttribute("lang");
          if (newLang !== currentLang) {
            currentLang = newLang;
            const settings = settingsByLang[currentLang] || esSettings;
            searchAndChat.update(settings);
            chatButton.update(settings);
          }
        }
      }
    });

    observer.observe(html, { attributes: true, attributeFilter: ["lang"] });
  }
);

const askAiButton = document.querySelector("#search-bar-entry + button");
const askAiButtonMobile = document.querySelector("#search-bar-entry-mobile + button");
if (askAiButton) askAiButton.style.display = "none";
if (askAiButtonMobile) askAiButtonMobile.style.display = "none";

This guide introduces Treble's business capabilities, the platform for developing with Treble, and how to start building.

Getting Started

Home

Welcome

Bienvenido

Bem-vindo

Treble is a tool that allows you to create customized conversation flows for your WhatsApp sales and marketing use cases. Additionally, Treble can be integrated with your information systems (CRM) like HubSpot and Salesforce to automate and optimize your WhatsApp messaging processes.

Overview

Welcome to Treble

This guide introduces key Treble concepts such as conversations, blocks, templates, and more.

Key Concepts

Learn how to create an outbound conversation in Treble.

Outbound Conversation

Learn how to create an inbound conversation in Treble.

Inbound Conversation

Understand everything about Treble, Meta, and WhatsApp

Meta and Treble

Understand everything about WhatsApp, WhatsApp Business, and WhatsApp Business API

WhatsApp, WhatsApp Business, and WhatsApp Business API

Learn how to connect your WhatsApp line to Treble.ai to automate and optimize your WhatsApp messaging processes.

Connect WhatsApp Line

Learn what HSM templates are and how to use them

HSM Templates

The Green Check is a green badge displayed on the WhatsApp line, indicating that the account has been verified by Meta.

Green Check WhatsApp Line

Learn how to create your conversations in Treble thinking about your campaign objectives

Campaign Objective

Alternate Flow

Second HSM

The goal block functionality allows you to define measurable goals for your WhatsApp conversation

Goal Block

Learn how to use the A/B Testing block in Treble

A/B Testing

Learn how to use the Transfer to Agent block in Treble

Transfer to Agent

The Treble main platform is the platform that allows you to create and manage your WhatsApp conversations.

Understanding the Main Platform

Learn how to send your outbound conversations to your customers and the different ways to do it.

Send Outbound Conversation

Learn how to use WhatsApp links in Treble

WhatsApp Links

With Treble, you can use agents that allow you to continue your conversations with your customers on WhatsApp.

Understanding the Agent Platform

Let's learn how to use Treble's main view to respond to conversations as an agent and some of the tools you can use.

Main View

With Treble, you can create agent teams so your advisors can work together on your customer conversations.

Agent Teams

With Treble, your agent team can continue your conversations with your customers directly from their phone.

Mobile App for Agents

Treble integrates with your information systems like HubSpot and Salesforce to automate and optimize your WhatsApp messaging processes. Discover how you can integrate Treble with your CRM or other information systems.

Integrations

This guide shows you how to integrate Treble with HubSpot.

HubSpot Integration

This guide shows you how to use CRM actions in Treble.

CRM Actions

This guide shows you how to integrate Treble with Salesforce.

Salesforce Integration

Treble es una herramienta que te permite crear flujos de conversación personalizados para tus casos de uso de ventas y marketing en WhatsApp. Adicionalmente, Treble se puede integrar con tus sistemas de información (CRM) como HubSpot y Salesforce para automatizar y optimizar tus procesos de mensajería por WhatsApp.

Descripción General

Bienvenido a Treble

Esta guía introduce conceptos clave de Treble como conversaciones, bloques, plantillas y más.

Conceptos Clave

Esta guía introduce las capacidades empresariales de Treble, la plataforma para desarrollar con Treble y cómo empezar a construir.

Empezar

Conoce como crear una conversación outbound en Treble.

Conversación Outbound

Conoce como crear una conversación inbound en Treble.

Conversación Inbound

Entiende todo sobre Treble, Meta y WhatsApp

Meta y Treble

Entiende todo sobre WhatsApp, WhatsApp Business y WhatsApp Business API

WhatsApp, WhatsApp Business y WhatsApp Business API

Aprende a conectar tu línea de WhatsApp a Treble.ai para automatizar y optimizar tus procesos de mensajería por WhatsApp.

Conectar Linea de WhatsApp

Aprende que son las plantillas HSM y como usarlas

Plantillas HSM

El Green Check es una insignia verde que se muestra en la línea de WhatsApp, lo que indica que la cuenta ha sido verificada por Meta.

Green Check Linea de WhatsApp

Aprende a crear tus conversaciones en Treble pensando en el objetivo de tus campañas

Objetivo de tu Campaña

Aprende a usar el flujo alterno de Treble

Flujo Alterno

Segundo HSM

La funcionalidad de bloque objetivo permite definir metas medibles para tu conversación de WhatsApp

Bloque de Objetivo

Aprende a usar el bloque de Pruebas A/B en Treble

Pruebas A/B

Aprende a usar el bloque de Transferencia a agente en Treble

Transferencia a agente

La plataforma principal de Treble es la plataforma que te permite crear y gestionar tus conversaciones de WhatsApp.

Entendiendo la plataforma principal

Aprende cómo enviar tus conversaciones outbound a tus clientes y las diferentes formas de hacerlo.

Enviar Conversación Outbound

Aprende a usar los links de WhatsApp en Treble

Links de WhatsApp

Con Treble, puedes usar agentes que te permiten continuar tus conversaciones con tus clientes en WhatsApp.

Entendiendo la plataforma de Agentes

Aprendamos a usar la vista principal de Treble para responder conversaciones como agente y algunas de las herramientas que puedes usar.

Vista Principal

Con Treble, puedes crear equipos de agentes para que tus asesores puedan trabajar juntos en las conversaciones de tus clientes.

Equipos de Agentes

Con Treble, tu equipo de agentes puede continuar tus conversaciones con tus clientes directamente desde su celular.

Aplicación Móvil para Agentes

Treble se integra con tus sistemas de información como HubSpot y Salesforce para automatizar y optimizar tus procesos de mensajería por WhatsApp. Descubre como puedes integrar Treble con tu CRM u otros sistemas de información.

Integraciones

Esta guía te muestra cómo integrar Treble con HubSpot.

Integración con HubSpot

Esta guía te muestra cómo usar acciones de CRM en Treble.

Acciones de CRM

Esta guía te muestra cómo integrar Treble con Salesforce.

Integración con Salesforce

Treble é uma ferramenta que permite criar fluxos de conversação personalizados para seus casos de uso de vendas e marketing no WhatsApp. Além disso, o Treble pode ser integrado aos seus sistemas de informação (CRM) como HubSpot e Salesforce para automatizar e otimizar seus processos de mensagens do WhatsApp.

Visão Geral

Bem-vindo ao Treble

Este guia apresenta conceitos chave do Treble, como conversas, blocos, templates e mais.

Conceitos Chave

Este guia apresenta as capacidades de negócio do Treble, a plataforma para desenvolver com o Treble e como começar a construir.

Primeiros Passos

Aprenda como criar uma conversa outbound no Treble.

Conversa Outbound

Aprenda como criar uma conversa inbound no Treble.

Conversa Inbound

Entenda tudo sobre Treble, Meta e WhatsApp

Meta e Treble

Entenda tudo sobre WhatsApp, WhatsApp Business e API do WhatsApp Business

WhatsApp, WhatsApp Business e API do WhatsApp Business

Aprenda como conectar sua linha do WhatsApp ao Treble.ai para automatizar e otimizar seus processos de mensagens do WhatsApp.

Conectar Linha do WhatsApp

Aprenda o que são templates HSM e como usá-los

Templates HSM

O Selo Verde é um distintivo verde exibido na linha do WhatsApp, indicando que a conta foi verificada pela Meta.

Selo Verde da Linha WhatsApp

Aprenda como criar suas conversas no Treble pensando nos objetivos da sua campanha

Objetivo da Campanha

Aprenda a usar o fluxo alternativo do Treble

Fluxo Alternativo

A funcionalidade do bloco de objetivo permite definir metas mensuráveis para sua conversa no WhatsApp

Bloco de Objetivo

Aprenda a usar o bloco de Testes A/B no Treble

Testes A/B

Aprenda a usar o bloco de Transferência para agente no Treble

Transferência para agente

A plataforma principal do Treble é a plataforma que permite criar e gerenciar suas conversas do WhatsApp.

Entendendo a Plataforma Principal

Aprenda como enviar suas conversas outbound para seus clientes e as diferentes formas de fazê-lo.

Enviar Conversa Outbound

Aprenda a usar os links do WhatsApp no Treble

Links do WhatsApp

Com Treble, você pode usar agentes que permitem continuar suas conversas com seus clientes no WhatsApp.

Entendendo a plataforma de Agentes

Vamos aprender a usar a visualização principal do Treble para responder conversas como agente e algumas das ferramentas que você pode usar.

Visualização Principal

Com o Treble, você pode criar times de agentes para que seus atendentes possam trabalhar juntos em suas conversas com clientes.

Times de Agentes

Com o Treble, sua equipe de agentes pode continuar suas conversas com seus clientes diretamente de seus celulares.

Aplicativo Móvel para Agentes

O Treble se integra com seus sistemas de informação como HubSpot e Salesforce para automatizar e otimizar seus processos de mensagens via WhatsApp. Descubra como você pode integrar o Treble com seu CRM ou outros sistemas de informação.

Integrações

Este guia mostra como integrar o Treble com o HubSpot.

Integração com HubSpot

Este guia mostra como usar ações de CRM no Treble.

Ações de CRM

Este guia mostra como integrar o Treble com o Salesforce.

Get Started

Meta

Build with Treble

Main Platform

Agent Platform

Integrations

Trebot

Getting Started

Outbound Conversation

Inbound Conversation

Create first template (HSM)

Connect my conversation with agents