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.
Note that this only works when you use ChiliPiper.submit() and won't work if you use ChiliPiper.scheduling().
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:
ChiliPiper.submit("account-name", "router-name", {
domElement: "#main"
})
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.