> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.noteforms.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 do I create a “Chat Bubble” contact form using NoteForms?

# Learn how to create a "chat bubble" contact form for your site using NoteForms.

Not everyone likes (or has the resources) to provide live chat customer support on their website, yet having a contact chat bubble is very useful and looks great!

| Go from "average" to COOL😎 in seconds. 

1. Create a contact in NoteForms following [these instructions](https://help.NoteForms.com/en/article/creating-a-contact-form-with-notion-1tb64rt/) and save your changes.

2. Once you are of your form settings page, click the "Embed form as a pop-up in a website" option.

![](https://storage.crisp.chat/users/helpdesk/website/5d91dadd0b88a000/image_1v0bsmt.png)

3. You can preview your embed by clicking here:

![](https://storage.crisp.chat/users/helpdesk/website/5d91dadd0b88a000/image_vb16yi.png)

Mine looks like this:

![](https://storage.crisp.chat/users/helpdesk/website/5d91dadd0b88a000/image_1x6z1wq.png)

4. Use the "Advance options" section to edit your pop-up.

![](https://storage.crisp.chat/users/helpdesk/website/5d91dadd0b88a000/image_g6q7pq.png)

![](https://storage.crisp.chat/users/helpdesk/website/5d91dadd0b88a000/image_1jsyzgq.png)

5. Preview your embed again if needed (or just because it feels great). 😇

6. Copy the code and embed the chat bubble on your website.

![](https://storage.crisp.chat/users/helpdesk/website/5d91dadd0b88a000/image_9eu5pn.png)

7. This example looks like this on [my site](https://mateomelgar.com):

![](https://storage.crisp.chat/users/helpdesk/website/5d91dadd0b88a000/image_14vxhpm.png)

![](https://storage.crisp.chat/users/helpdesk/website/5d91dadd0b88a000/image_1yaoe4o.png)