> ## Documentation Index
> Fetch the complete documentation index at: https://help.treble.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# WhatsApp dentro de Salesforce

> Cómo crear una pestaña personalizada para que tus asesores vean y respondan conversaciones de WhatsApp sin salir del CRM.

Puedes incrustar la bandeja de conversaciones de Treble **dentro de Salesforce**, como una pestaña más de la barra de navegación. El asesor entra a Salesforce, hace clic en la pestaña, y responde WhatsApp desde ahí.

<img src="https://mintcdn.com/trebleai/n_48dzI5l_tB6XfZ/images/salesforce-custom-tab-5.png?fit=max&auto=format&n=n_48dzI5l_tB6XfZ&q=85&s=012e13587eb22ff95ebfa2cb70474e7b" alt="La pestaña de Treble WhatsApp dentro de Salesforce" className="mx-auto" width="3024" height="1714" data-path="images/salesforce-custom-tab-5.png" />

<Note>
  Esto se configura en Salesforce, con un usuario administrador, y es independiente de la integración de datos. Puedes tenerlo con cualquiera de los dos tipos de integración.
</Note>

<div class="hr" />

## Antes de empezar

<Steps>
  <Step title="Ten a la mano tu API key de Treble">
    La encuentras en la plataforma de Treble, en **Configuración → Desarrolladores → API KEY**.

    <Warning>
      La API key es una credencial. Trátala como una contraseña: no la publiques, no la pegues en canales abiertos y no la compartas fuera de tu equipo de administración de Salesforce.
    </Warning>
  </Step>

  <Step title="Confirma que tus asesores existen como agentes en Treble">
    La pestaña inicia sesión con el **correo del usuario de Salesforce**. Si ese correo no corresponde a un agente de Treble, la pestaña no va a poder abrir su bandeja.
  </Step>
</Steps>

<div class="hr" />

## 1. Crear la pestaña web

<Steps>
  <Step title="Entra a Setup → Tabs">
    Busca "tabs" en la barra de búsqueda de Setup y abre **Tabs**. Baja hasta la sección **Web Tabs** y haz clic en **New**.

    <img src="https://mintcdn.com/trebleai/n_48dzI5l_tB6XfZ/images/salesforce-custom-tab-1.png?fit=max&auto=format&n=n_48dzI5l_tB6XfZ&q=85&s=68052676e21154c95cdbf87bf5ebbf40" alt="Crear una nueva Web Tab en Salesforce" className="mx-auto" width="3024" height="1718" data-path="images/salesforce-custom-tab-1.png" />
  </Step>

  <Step title="Elige el estilo de la pestaña">
    En el paso 1, deja el estilo por defecto (página completa). Haz clic en **Next**.
  </Step>

  <Step title="Define el nombre y la altura">
    <img src="https://mintcdn.com/trebleai/n_48dzI5l_tB6XfZ/images/salesforce-custom-tab-2.png?fit=max&auto=format&n=n_48dzI5l_tB6XfZ&q=85&s=e3fcb875706bd4f03946fd18dda76b6a" alt="Propiedades de la pestaña web" className="mx-auto" width="3024" height="1716" data-path="images/salesforce-custom-tab-2.png" />

    | Campo | Valor sugerido |
    | - | - |
    | **Tab Label** | `Treble WhatsApp` |
    | **Tab Name** | `Treble_WhatsApp` |
    | **Tab Style** | El ícono y color que prefieras |
    | **Content Frame Height (pixels)** | `600` |

    <Tip>
      600 píxeles funciona bien en la mayoría de las pantallas. Si tus asesores trabajan en monitores grandes y la bandeja se ve apretada, puedes subirlo después editando la pestaña.
    </Tip>
  </Step>

  <Step title="Pon la URL de Treble">
    En el paso 3, en el campo **Button or Link URL**, pega:

    ```
    https://agent-api.treble.ai/agent/login/salesforce?email={!$User.Email}&apiKey=TU_API_KEY
    ```

    Reemplaza `TU_API_KEY` por la clave que te dio Treble. Deja `{!$User.Email}` tal cual: es un campo de combinación de Salesforce que inserta automáticamente el correo del usuario que abre la pestaña, y es lo que hace que cada asesor vea **su propia** bandeja.

    En **Encoding** deja `Unicode (UTF-8)`.

    <Warning>
      No reemplaces `{!$User.Email}` por un correo fijo. Si lo haces, todos tus asesores entrarían a la bandeja de la misma persona.
    </Warning>
  </Step>

  <Step title="Define visibilidad y guarda">
    En los pasos 4 y 5, elige qué perfiles pueden ver la pestaña y en cuáles aplicaciones debe aparecer. Guarda.
  </Step>
</Steps>

<div class="hr" />

## 2. Agregar la pestaña a la barra de navegación

Crear la pestaña no la hace visible por sí sola: hay que agregarla a la aplicación.

<Steps>
  <Step title="Abre el editor de navegación">
    En la aplicación donde la quieres (por ejemplo *Sales*), haz clic en el **ícono de lápiz** al final de la barra de navegación.

    <img src="https://mintcdn.com/trebleai/n_48dzI5l_tB6XfZ/images/salesforce-custom-tab-3.png?fit=max&auto=format&n=n_48dzI5l_tB6XfZ&q=85&s=5c4663f0e993504cd583e05446768b0e" alt="Ícono de lápiz para editar la navegación" className="mx-auto" width="3024" height="1712" data-path="images/salesforce-custom-tab-3.png" />
  </Step>

  <Step title="Agrega Treble WhatsApp">
    Haz clic en **Add More Items**, busca la pestaña que creaste y agrégala. Arrástrala a la posición que quieras y haz clic en **Save**.

    <img src="https://mintcdn.com/trebleai/n_48dzI5l_tB6XfZ/images/salesforce-custom-tab-4.png?fit=max&auto=format&n=n_48dzI5l_tB6XfZ&q=85&s=d453b899547b302b9fe307e46a091143" alt="Agregar Treble WhatsApp a los elementos de navegación" className="mx-auto" width="3024" height="1714" data-path="images/salesforce-custom-tab-4.png" />
  </Step>
</Steps>

<Check>
  Listo. La pestaña **Treble WhatsApp** aparece en la barra de navegación y abre la bandeja del asesor que está conectado.
</Check>

<div class="hr" />

## Qué ve el asesor

Dentro de la pestaña tiene:

* **Conversaciones**: las conversaciones activas que le fueron asignadas, para leer y responder.
* **Contactos**: la lista de contactos, desde donde puede crear uno nuevo o enviar una plantilla (HSM) para abrir una conversación.

<Info>
  La bandeja muestra las conversaciones **asignadas a ese asesor**. Si un asesor dice que no ve nada, lo más probable es que simplemente no tenga conversaciones asignadas en ese momento, no que la pestaña esté mal configurada.
</Info>

<div class="hr" />

## Problemas frecuentes

<AccordionGroup>
  <Accordion title="La pestaña aparece en blanco o no carga">
    Suele ser una de estas:

    1. **La API key está mal o incompleta.** Revisa que se haya pegado completa, sin espacios al final.
    2. **El correo del usuario de Salesforce no corresponde a un agente de Treble.** La pestaña entra con el correo del usuario conectado; si no existe en Treble, no hay bandeja que mostrar.
    3. **Restricciones del navegador.** Algunas configuraciones de seguridad bloquean el contenido incrustado. Salesforce lo advierte en la pantalla de creación de la pestaña.
  </Accordion>

  <Accordion title="El asesor entra a Salesforce pero no logra entrar a Treble">
    Una sesión de Salesforce **no** es una sesión de Treble. La pestaña usa el correo del usuario de Salesforce para identificar al agente, pero ese agente necesita existir en Treble y tener sus propias credenciales.

    Si el asesor no puede entrar, el camino es restablecer su contraseña **de Treble**, no la de Salesforce. Y si no existe como agente, hay que crearlo primero.

    <a class="article-link" href="/es/docs/agent-platform/admin/tags-teams#crear-un-nuevo-agente"><p>Crear un nuevo agente</p><Icon icon="arrow-up-right-from-square" iconType="solid" /></a>
  </Accordion>

  <Accordion title="Todos los asesores ven la misma bandeja">
    Se reemplazó `{!$User.Email}` por un correo fijo en la URL. Edita la pestaña y vuelve a poner el campo de combinación.
  </Accordion>

  <Accordion title="La pestaña no aparece en la barra de navegación">
    Crear la pestaña y agregarla a la aplicación son dos pasos distintos. Revisa el paso 2 de esta guía, y confirma que el perfil del asesor tenga la pestaña como visible.
  </Accordion>

  <Accordion title="La bandeja se ve cortada verticalmente">
    Sube el valor de **Content Frame Height** en la configuración de la pestaña.
  </Accordion>
</AccordionGroup>

<div class="hr" />

## Siguientes pasos

<CardGroup cols={2}>
  <Card title="Transferir a un asesor" icon="headset" href="/es/docs/integrations/salesforce/blocks/human-transfer">
    Cómo llega una conversación a la bandeja de un asesor.
  </Card>

  <Card title="Lanzar conversaciones desde Salesforce" icon="bolt" href="/es/docs/integrations/salesforce/embed/automation-flow-package">
    Disparar una campaña de Treble desde un automation flow.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.