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

If your page contains two or more Marketo forms on the same page, the snippet above will not work on your page to fire the Concierge calendar, since it will be required to provide the form ID as an additional parameter.

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

Below there is an example of how it can be implemented inside each script of Marketo Form:

Form with id "mktoForm_1057":

<script>
MktoForms2.loadForm("//app-ab00.marketo.com", "785-UHP-775", 1057, function(form) {
    form.onSuccess(function(values, followUpUrl){
        ChiliPiper.submit("account", "router", {map:true, formId: "mktoForm_1057"});
        return false;
    });
}); 
</script>

Form with id "mktoForm_1067":

<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> 

Remember to include our Chili Piper Javascript library script as another line in the code. 

<script src="https://js.chilipiper.com/marketing.js" type="text/javascript"></script>

As indicated in the API References of Marketo Forms, these are the parameters of the MktoForms2.loadForm: