---
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-07-24T18:55:58Z
content_hash: 9f1500e9
---

## 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).