> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://klip.crisp.help/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).

# Installing Klip Coupons on Custom Page Builders

|| In this guide, we’ll show you how to install Klip Coupons using a page builder. While page builders can differ, the process of adding custom HTML or Liquid code is similar across most platforms. For this example, we’ll use PageFly to demonstrate the steps

### 1. Open the Page You Want to Edit
Select the page you want to edit or create a new one in PageFly.

### 2. Add an HTML/Liquid Element
* Click on the **"Elements"** icon (second from the top on the left toolbar).
* In the **PageFly** tab (or other page builder app), choose the **HTML/Liquid** element.

![](https://storage.crisp.chat/users/helpdesk/website/-/4/7/2/a/472a755f79a70800/image_c8ct2q.png)

### 3. Drag and Drop the Element
* Drag the HTML/Liquid element into the page editor and place it where you want the Klip Coupon to appear.

![](https://storage.crisp.chat/users/helpdesk/website/-/4/7/2/a/472a755f79a70800/image_1oyt9a1.png)

### 4. Open the Code Editor
* Select the **HTML/Liquid** element you just added.
* Click **“Open code editor”** to access the element’s code editor.

![](https://storage.crisp.chat/users/helpdesk/website/-/4/7/2/a/472a755f79a70800/image_bsmfv3.png)

### 5. Add the Klip Coupon Code
* Paste the following code into the editor:
```
<div class="elsklip-coupon-box"></div>
```
* Click **Done** to save the code inside the element.

![](https://storage.crisp.chat/users/helpdesk/website/-/4/7/2/a/472a755f79a70800/image_1sya3v.png)

### 6. Save and Publish Your Page
* After closing the code editor, click **Save** in PageFly to save the page changes.
* Click **Publish** to make the page live.

### 7. Test the Coupon Display
* Open your live page in a browser.
* Verify that the Klip Coupon appears in the correct location.

![](https://storage.crisp.chat/users/helpdesk/website/-/4/7/2/a/472a755f79a70800/image_14oftrv.png)


###### Additional Tips

| Multiple Pages: Repeat these steps on any other pages where you want coupons displayed.

| Other Builders: If you’re using a different page builder, look for elements labeled HTML, Custom Code, or Embed—the steps are very similar.

| Placement Adjustments: You can drag the HTML/Liquid element to adjust where the coupon appears on the page.