# Instalar en Shopify

Agregar un widget de chat web en tu tienda Shopify es un proceso rápido y fácil. No requiere habilidades de codificación ni conocimientos técnicos.

![](https://3885607557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdiyIbj69hv5kjrp8i4xC%2Fuploads%2FRcxa1nSqhSRieqrX4naM%2FShopify%20Logo.png?alt=media\&token=1d17868f-ce0c-452d-b581-ca6c2610431e)

## Configuración para la instalación <a href="#setting-up-for-installation" id="setting-up-for-installation"></a>

{% hint style="info" %}
Para instalar un widget de chat web en Shopify, necesitará lo siguiente: \
\- Acceso a su [cuenta de Shopify](https://accounts.shopify.com/store-login) \
\- Un fragmento de código para su widget de chat web
{% endhint %}

Si aún no tiene un fragmento de código, lo generará al crear un [widget de chat del sitio web](https://docs.bony.chat/canales-de-mensajeria/widget-de-chat-online/broken-reference) de okeybot.com o al usar el [plugin de chat de Facebook ](https://docs.bony.chat/canales-de-mensajeria/widget-de-chat-online/broken-reference)para [Facebook Messenger.](https://docs.bony.chat/canales-de-mensajeria/widget-de-chat-online/broken-reference)

{% hint style="info" %}
Si ya tiene los canales conectados en la plataforma okeybot.com y necesita recuperar el fragmento de código generado, navegue a la sección [Administrar canales](https://docs.bony.chat/canales-de-mensajeria/widget-de-chat-online/broken-reference) en Configuración . Presione el respectivo botón azul **Editar** para encontrar el script generado.
{% endhint %}

## **Instalación en Shopify** <a href="#installing-on-shopify" id="installing-on-shopify"></a>

### **Paso 1: Inicia sesión en Shopify** <a href="#step-1-log-in-to-shopify" id="step-1-log-in-to-shopify"></a>

Inicie sesión en su [cuenta de Shopify](https://accounts.shopify.com/store-login) y haga clic en **"Tienda en línea"** en la barra de navegación.

![](https://3885607557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdiyIbj69hv5kjrp8i4xC%2Fuploads%2FzGemkXovL0OBdguT4iT8%2Fimage%20\(6\).png?alt=media\&token=d65b8056-2847-4b64-b5d4-0d1349b49b4b)

### **Paso 2: Haga clic en Editar código** <a href="#step-2-click-on-edit-code" id="step-2-click-on-edit-code"></a>

Navega a la sección **Temas**. Aquí, haga clic en el menú desplegable **Acciones** y seleccione la opción **Editar código** .

![](https://3885607557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdiyIbj69hv5kjrp8i4xC%2Fuploads%2FBwxK89nkg4hMjPsoF4zB%2FScreen%20Shot%202021-10-20%20at%209.37.14%20AM.png?alt=media\&token=7a5f5be4-8844-4411-8696-eb1ad26a8951)

### **Paso 3: Pegue el script** <a href="#step-3-paste-the-script" id="step-3-paste-the-script"></a>

Copie el script del plugin de la plataforma bony.chat. En el panel izquierdo de la página Editar código, haga clic en la carpeta **Secciones** para expandirla. Presione la sección **footer.liquid** y pegue el script del complemento de chat.

![](https://3885607557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdiyIbj69hv5kjrp8i4xC%2Fuploads%2FWEurPCmhmFaTHfW5U6Cf%2FScreen%20Shot%202021-10-20%20at%2010.30.52%20AM.png?alt=media\&token=71c26dbb-8df9-44f6-b9b4-b03a97173d49)

Una vez que haya pegado el script en la sección correspondiente, presione el botón morado **Guardar** en la parte superior izquierda.

### **¡Hecho!** <a href="#done" id="done"></a>

Abra el sitio web y compruebe el plugin del chat. Lo encontrará en la esquina inferior derecha. Ahora los visitantes de su sitio web pueden conversar sin esfuerzo con usted. Si usó los fragmentos de código generados desde la plataforma bony.chat, podrá administrar las conversaciones y actualizar la apariencia del widget desde la Plataforma.

{% hint style="success" %}
¡El widget de chat ahora está activo en su sitio web!
{% endhint %}

{% hint style="info" %}
Nota: Si está utilizando un tema externo y el widget no funciona, intente incrustar el código del sitio web en la sección **theme.liquid** antes de \</body>
{% endhint %}