> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.dorik.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 Add Popup to Your Website


# Getting Started

Boost your website’s engagement by integrating interactive pop-ups. This guide walks you through everything you need to know to effectively use pop-ups on your site. You can configure any row or element to function as a pop-up using three trigger modes: Exit Intent, On Load, and On Click — all covered in detail below.
---

# How to Create a Pop-Up


- Follow these steps to set up a pop-up on your website:

1. **Add a Container** - Start by adding a new container from the Row with Columns (Legacy) section.

![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/image_1j6bx1r.png)

2. **Enable Pop-Up Mode** - Go to Row Settings, enable the Make it as Popup option, and assign a unique Popup Modal ID to identify the pop-up when configuring triggers.

![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/image_1uigaul.png)

3. **Add Content** - Insert any desired elements into the row (e.g., a contact form) and customize its design to suit your needs.

![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/image_1jcbpf0.png)

4. **Preview the Pop-Up** - Use the Pop-Up Preview toggle in Row Settings to see how your pop-up will appear.

![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/image_rsrs63.png)

5. **Customize the Style** - Adjust the styling options to personalize the appearance of the pop-up.

![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/image_kig39g.png)

6. **Triggering Your Pop-Up** - You can choose from three trigger methods:

* **On Load** - To show the pop-up immediately when the page loads:
	•	Navigate to Page Settings > Popup Settings
	•	Select Onload Popup
	•	Choose your Popup Modal ID

![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/image_zbsa2.png)

* **Exit Intent** - To display the pop-up when a visitor attempts to leave the page:
	•	Go to Page Settings > Popup Settings
	•	Select Exit Intent Popup
	•	Choose your Popup Modal ID

![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/image_lhq1tw.png)
|| Use the Show it repeatedly toggle to control whether the pop-up displays only on a user’s first visit or on every visit.

* **On Click** - To show the pop-up when a button is clicked:
	•	Create a button element
	•	Set the Popup Modal ID as the button’s link

![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/image_d2vfjq.png)

7. **Final Step: Publish** - Once you’re done editing, click Save and Publish to make the pop-up live on your site.

![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/image_1ndjcpa.png)
---
# Video Tutorial

${youtube}[How to Add Popup to Your Website](sRbw1RjZklI)
If you need additional help, feel free to reach out to our support team — we’re always here to assist!

Cheers! :D 
 ---
---
# Related articles

[Page Settings](/en/article/page-settings-18ptbd5/)