Selecting a Element within the Page to Run Concierge

Use-Case Overview

By Default when using Concierge, the Chili Piper calendar loads within the body of your web page. 

However, you may want to show Chili Piper Concierge Widget 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}}'.

In some cases, setting the CSS position property to "relative" of this element is needed for Chili Piper to display the calendar correctly.

Example

ChiliPiper.submit("account-name", "router-name", {
    domElement: "#main", //domElement can be either a selector or a direct reference to the dom node. It will work in either case
    closeOnOutside: true,
    lead: {
        FirstName: "test",
        LastName: "test",
        Email: "test@domain.org",
        Phone: "222-222-2222",
        Company: "AMCE"
    }
})