> ## 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).

# How to integrate EasySell with GemPages?

${youtube}[](WWIFJsWUAkI)

||| If you already have the **Add to cart button** on your page, the Form button will be inserted bellow it, but if you want to add the Form button in a specific position you can easily do this by following this article.


EasySell COD Order form integrates with most page builder, follow the steps bellow if you want to add the Form button in a specific position.

###### 1- Add a block of Custom Code where you would like to have the COD button on GemPages

* Go to your GemPages dashboard.
* Select the page you want to edit.
* In the page editor, choose **Elements** from the left menu.
* In the search bar, type **Custom code** or navigate to **Advanced** > **Custom Code** in the left menu.

![](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- Click on the **Edit code**

* Drag and drop the custom code element to the desired location on the page.
* Click on **Edit Code** in the left menu of your element options.

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

###### 3- Paste this code into the **Code editor** then save

| Copy and paste this code: `<span id="es-form-hook" ></span>`

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

###### 4- Publish

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

###### 5- Open the **preview** to see your COD button

![](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)

# Use custom button or image to open the form

You can also use your custom button to open the form, just set the **ID** or the **CSS class** of the button to this code:
```
es-popup-button-overwrite
```


![](https://storage.crisp.chat/users/helpdesk/website/-/4/b/1/5/4b154ca9ad47c000/image_lwscfb.png)
If you want to use an Image to open the form, please follow this aritcle:

[How to use an image as a button to open EasySell order form?](https://help.tyslo.com/en/article/how-to-use-an-image-as-a-button-to-open-easysell-order-form-e0d52d/)

| ℹ️ If need any further information or you need any kind of help, please do not hesitate to contact us via chat or WhatsApp from the app 😎