Using the Concierge Snippet with Marketo Forms

If your Marketo form fields do not match object fields in Salesforce, you will want to use the map:true option within the snippet to find and map these object names correctly. 

If your form field names already match the SF standard object names, you may be able to skip this step. For info on that, see this article.

Customize the snippet for your form

The code is the same as what we have in our router embed settings within the router with one notable difference, adding "map:true"

<script>
function q(a){return function(){ChiliPiper[a].q=(ChiliPiper[a].q||[]).concat([arguments])}}window.ChiliPiper=window.ChiliPiper||"submit scheduling showCalendar submit widget bookMeeting".split(" ").reduce(function(a,b){a[b]=q(b);return a},{});
ChiliPiper.scheduling("account", "router", {
  map: true
})
</script>
<script src="https://js.chilipiper.com/marketing.js" type="text/javascript" async></script>

The account and router name can be found in your Chili Piper Router. You can confirm you have these correct by navigating to Embed for your form. Javascript for your Inbound Concierge in your Router settings.

The first string, "calendar" is your account name, and the second string, "prod-testing-router" is your router name - you will want to copy this exactly when creating the API code.

Once these two components are updated and map: true added, you will want to add this new code below your Marketo form.

Two or more Marketo Forms on the same page

Suppose your page contains two or more Marketo forms on the same page (for example, an email newsletter signup from which you wouldn't want to book a meeting). In that case, the below snippet adds a formId option as an additional parameter, which tells Chili Piper to only load when that particular form is submitted. 

<script> 
function q(a){return function(){ChiliPiper[a].q=(ChiliPiper[a].q||[]).concat([arguments])}}window.ChiliPiper=window.ChiliPiper||"submit scheduling showCalendar submit widget bookMeeting".split(" ").reduce(function(a,b){a[b]=q(b);return a},{}); 
ChiliPiper.scheduling("account", "router", { 
map: true,
formId: "mktoForm_1099"
 }) 
</script> 
<script src="https://js.chilipiper.com/marketing.js" type="text/javascript" async></script>

In the example above, we're setting 'formId: "mktoForm_1099"' to align with the corresponding Marketo form with id = "mktoForm_1099", which you can find by inspecting your form and looking for the 'id' attribute within the <form> tag, like so:

Using Marketo's Native onSuccess callback to run Chili Piper's JS API

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. We could use this method assuming that you've already loaded your Marketo form on the page that you're adding the Chili Piper code to 

<script src="https://js.chilipiper.com/marketing.js" type="text/javascript"></script>
<script>
    var tenantSubdomain = "replace-this"; // REPLACE
    var tenantRouter = "replace-this"; // 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

Below there is an example of how it can be implemented inside each script of Marketo Form. This is slightly different than the above method as with the code below. 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