Displaying Chili Piper within a DOM Element

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.