Using the Concierge with Marketo Forms

Chili Piper integrates seamlessly with Marketo forms, allowing you to trigger scheduling directly after a form submission. The most common and recommended method is to use the standard Concierge snippet. This is the approach almost all customers should start with.

In some cases, however, you may want more control over how and when Chili Piper is triggered. For example, you might want to run custom logic based on form field values or explicitly define which form IDs load Chili Piper. For these situations, we’ve included two alternative setup methods:

• Using Marketo’s native whenReady listener to run Chili Piper’s JavaScript API

• Nesting Chili Piper inside Marketo’s loadForm() method

This article guides you through the standard setup, followed by two advanced options.

Marketo Forms & Conceirge Snippet

1. Once your Concierge Router is configured, you can go to the Embed tab and open the On a Website option.

2. From the On a Website section, you will select your Form Type as Marketo.

3. Optionally, you can add a Form ID. This is beneficial if you have multiple Forms on the page. Example below:

4. Lastly, copy the code snippet and add it below your form on your web page.

Using Marketo's Native whenReady listener to run Chili Piper's JS API

The function is useful if you already have a Marketo form loaded on the page somewhere and you want to Chili Piper to "listen for" any Marketo form submissions that take place, regardless of which form is used. 

In this Marketo developers article, we can see that we can manipulate the MktoForms2.whenReady function and add actions during the onSuccess. This way, ChiliPiper.Submit function can be used to properly fire the calendar, passing the parameters of the proper form.

<script id="chilipiper-concierge" 
src="https://subdomain.chilipiper.com/concierge-js/cjs/concierge.js" 
crossorigin="anonymous" type="text/javascript"> // REPLACE subdomain 
<script> 
var tenantSubdomain = "chili"; // REPLACE 
  var tenantRouter = "chili"; // REPLACE 
  MktoForms2.whenReady(function(form) { 
   form.onSuccess(function(values, followUpUrl) { 
     ChiliPiper.submit(tenantSubdomain, tenantRouter, {map: true, 
lead:values}); 
     return false; 
   }); 
 }); 
</script>

There are some cases when using this method works better with Marketo forms, or is a method to try if you're having trouble having Chili Piper load properly using the standard Chili Piper snippet at the top of this article.

Some of the cases when using this method are:

• You want to conditionally run the Chili Piper code if certain values on certain fields are submitted (or not submitted) thru the form.
  • i.e. "What's your interest?" = "Job Seeker" → don't run Chili Piper and instead redirect to your careers page
  • i.e. If "Country" = "United State, Canada" → Run Chili Piper
• You want to run separate Routers of Chili Piper based on the form fields submitted
  • i.e. if "Existing Customer?" = "Yes" → Load the Existing Customers Router to schedule with Account Managers. If "Existing Customer?" = "No" → Load the New Customers Router to schedule with your Sales team. 

To do such logic in the examples above, you may not need to do this. You may be able to do this logic natively within Chili Piper, so it's best to consult your Chili Piper CSM to discuss the proper way to handle your unique situation. Our team can help advise on any if/then logic to help you achieve the desired result that you're looking for. 

Nesting Chili Piper inside Marketo's loadForm() method

This function is useful if you want to explicitly define what form (ID) you load Chili Piper on, or when the Marketo form doesn't already exist in the DOM.

It does two things:

1) Loads your Marketo form on the Page 

2) Nests ChiliPiper.submit inside the Javascript that is loading the form and calls ChiliPiper onSuccess of the Marketo form. 

<script src="https://js.chilipiper.com/marketing.js" type="text/javascript"></script>
<script>
MktoForms2.loadForm("//app-ab00.marketo.com", "785-UHP-775", 1067, function(form) {
    form.onSuccess(function(values, followUpUrl){
        ChiliPiper.submit("account", "router", {map:true, formId: "mktoForm_1067"});
        return false;
    });
});
</script> 

Form with id "mktoForm_1067":

API References of Marketo Forms