---
title: "Displaying Chili Piper within a DOM Element"
source_url: https://help.chilipiper.com/hc/en-us/articles/360053021534-Displaying-Chili-Piper-within-a-DOM-Element
article_id: 360053021534
updated_at: 2026-01-06T16:29:27Z
---

## Use-Case Overview

By default, when using Concierge, the Chili Piper calendar loads within the **body** of your web page as a popup modal.

However, you may want to show Chili Piper Concierge in a little widget on the page within an element you define.

## How to set it up

Within your Chili Piper Javascript Snippet, you can add an option 'domElement: {{Dom_Selector}} OR {{Dom_Node}}'.

The value of domElement can be either a selector or DOM Node. Either will work.

In some cases, setting the CSS position property to "_position:__relative;_ " of this element is needed for Chili Piper to display the calendar correctly.

## Example

A great example would be if you wanted to load Chili Piper within a specific element or section of your landing page rather than as a popup modal.

Let's say you have an element on the page you want the calendar to appear in, properly styled to fit:

> <style>  
> #main{  
>  width: 550px;  
>  height: 800px;  
>  position: relative;  
> }  
> </style>  
> <div id="main"></div>

We can define this in the snippet using the following:

> <script>  
> ChiliPiper.deploy("account-name", "router-name", {  
>  **domElement: "#main",  
> ** trigger: "ThirdPartyForm",  
>  formType: "HTML" // set to what your actual form provider is**  
> **})  
>  </script>

Once this is done and Chili Piper's script is called (on submit/click, etc.), it will appear within that defined element.

For information on other options, you can include in the Chili Piper Javascript snippet, see your main article on configuring it [here](https://help.chilipiper.com/hc/en-us/articles/360053800373).