# How to Add Pop-ups?

Follow the steps below to add pop-ups for your website.

1. From Advanced Editor page, click **“PAGES”** icon on the left panel.

<figure><img src="https://813547763-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiPhRDfcPxcS1rIzvmNHd%2Fuploads%2FjD69R15CQvoCxMGSgbAL%2Fimage.png?alt=media&#x26;token=53642af7-f699-45e3-863c-f3af4ca7a78c" alt=""><figcaption></figcaption></figure>

2. Click the **"Popups"** tab.

<figure><img src="https://813547763-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiPhRDfcPxcS1rIzvmNHd%2Fuploads%2FNTyLnCDb2TJjeeEP8SQD%2Fimage.png?alt=media&#x26;token=debb419e-2024-42f6-8a6a-beb5b0c57586" alt=""><figcaption></figcaption></figure>

3. Click on the **"+ New Popup"** button.

<figure><img src="https://813547763-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiPhRDfcPxcS1rIzvmNHd%2Fuploads%2FymiRp1K6M8BlSp0EwI9U%2Fimage.png?alt=media&#x26;token=eff4bde5-d804-40fd-baa4-675ac8cb698c" alt=""><figcaption></figcaption></figure>

3. The **"New Popup"** window should appear.&#x20;

<figure><img src="https://813547763-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiPhRDfcPxcS1rIzvmNHd%2Fuploads%2FywURpJZ8WAOas7P8UGoY%2Fimage.png?alt=media&#x26;token=4c3d70ab-67a0-44be-9eb5-288c3a8e72a4" alt=""><figcaption></figcaption></figure>

4. You can hover your mouse over each icon and you will see a preview or sample of the said pop-up.&#x20;

<figure><img src="https://813547763-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiPhRDfcPxcS1rIzvmNHd%2Fuploads%2Ft7GIkOYCTh3wjLFAEXoj%2Fimage.png?alt=media&#x26;token=ea54b463-b8b8-4ae1-86f8-7809e0d43603" alt=""><figcaption><p>In this screenshot, the mouse is hovered over the "Online Scheduling" Icon. The icon changes to color blue when the mouse is hovered over it. You will also see the preview/sample of the said pop-up on the right side.</p></figcaption></figure>

5. Click on the icon of your choice and you will see the **"NEW POPUP"** window. Here, you can rename the pop-up. Once you're done, click the **"+ Add Popup"** button .

<figure><img src="https://813547763-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiPhRDfcPxcS1rIzvmNHd%2Fuploads%2FUjcz99zzwrJXK4n7rUBl%2Fimage.png?alt=media&#x26;token=e516cab0-433b-4fce-bb49-fbecde0c92a9" alt=""><figcaption></figcaption></figure>

6. The pop-up will now be displayed on the website as shown below. Here, you may now customize elements of the pop-up that you've just created by simply clicking on the elements.

<figure><img src="https://813547763-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiPhRDfcPxcS1rIzvmNHd%2Fuploads%2FgXIUYUn9ACYnJUikOOUX%2Fimage.png?alt=media&#x26;token=d85e8b4c-2b7d-497d-9061-f035e28ff7f1" alt=""><figcaption><p>I</p></figcaption></figure>

7. To further edit the pop-up design, you may click on the **"POPUP SETTINGS"** at the bottom of the page to access the **"POPUP DESIGN"** editor (see image below). Here you can further edit the style, background and spacing of your pop-up.

<figure><img src="https://813547763-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiPhRDfcPxcS1rIzvmNHd%2Fuploads%2Fj44fuIJ01tam5RppVI3T%2Fimage.png?alt=media&#x26;token=a3bd2650-022f-4347-98b3-3d00a1ec373d" alt=""><figcaption></figcaption></figure>

8. Once done editing, just hit the **"Republish"** button on the upper-right corner of the page.

<figure><img src="https://813547763-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiPhRDfcPxcS1rIzvmNHd%2Fuploads%2FIy2lTRu9hxTTaQH4oLBB%2Fimage.png?alt=media&#x26;token=37875f33-857c-47dc-bbfd-f9010c389b69" alt=""><figcaption></figcaption></figure>
