> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.tyslo.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# ¿Cómo integrar EasySell con GemPages?

${youtube}[](WWIFJsWUAkI)

||| Si ya tienes el **botón Añadir al carrito** en tu página, el botón de formulario se insertará debajo de este, pero si quieres añadir el botón de formulario en una posición específica, puedes hacerlo fácilmente siguiendo este artículo.

El formulario de pedido COD de EasySell se integra con la mayoría de los constructores de páginas, sigue los pasos a continuación si quieres añadir el botón de formulario en una posición específica.

###### 1- Añade un bloque de Código Personalizado donde quieras tener el botón COD en GemPages

* Ve a tu panel de control de GemPages.
* Selecciona la página que deseas editar.
* En el editor de páginas, elige **Elementos** en el menú de la izquierda.
* En la barra de búsqueda, escribe **Código personalizado** o navega a **Avanzado** > **Código Personalizado** en el menú de la izquierda.

![](https://storage.crisp.chat/users/helpdesk/website/4b154ca9ad47c000/cleanshot-2024-04-20-at-141609_1bxpnld.png)

![](https://storage.crisp.chat/users/helpdesk/website/4b154ca9ad47c000/cleanshot-2024-04-20-at-142141_1av0qqv.png)

###### 2- Haz clic en **Editar código**

* Arrastra y suelta el elemento de código personalizado en la ubicación deseada en la página.
* Haz clic en **Editar Código** en el menú de la izquierda de tus opciones de elemento.

![](https://storage.crisp.chat/users/helpdesk/website/4b154ca9ad47c000/cleanshot-2024-04-20-at-143113_12gsbqp.png)

###### 3- Pega este código en el **Editor de código** y guarda

| Copia y pega este código: `<span id="es-form-hook" ></span>`

![](https://storage.crisp.chat/users/helpdesk/website/4b154ca9ad47c000/cleanshot-2024-04-20-at-143728_mwdgxt.png)

###### 4- Publica

![](https://storage.crisp.chat/users/helpdesk/website/4b154ca9ad47c000/cleanshot-2024-04-20-at-144053_b0qw7w.png)

###### 5- Abre la **vista previa** para ver tu botón COD

![](https://storage.crisp.chat/users/helpdesk/website/4b154ca9ad47c000/cleanshot-2024-04-20-at-144308_1qschrt.png)

![](https://storage.crisp.chat/users/helpdesk/website/4b154ca9ad47c000/cleanshot-2024-04-20-at-144422_1yvfaxz.png)

# Usar un botón personalizado o una imagen para abrir el formulario

También puedes usar tu propio botón personalizado para abrir el formulario, solo tienes que establecer el **ID** o la **clase CSS** del botón con este código:

```
es-popup-button-overwrite
```

![](https://storage.crisp.chat/users/helpdesk/website/-/4/b/1/5/4b154ca9ad47c000/image_lwscfb.png)

Si quieres usar una imagen para abrir el formulario, por favor sigue este artículo:
[¿Cómo usar una imagen como botón para abrir el formulario de pedidos de EasySell?](https://help.tyslo.com/en/article/how-to-use-an-image-as-a-button-to-open-easysell-order-form-e0d52d/)



| ℹ️ Si necesitas más información o cualquier tipo de ayuda, no dudes en contactarnos por chat o WhatsApp desde la aplicación 😎