Using Javascript API with Marketo Forms

If your Marketo form fields do not match object fields in Salesforce, then you will want to use the Javascript API as outlined below, rather than our javascript snippet. 

 In this article we will cover the three steps required to implement this code:

• Customize the API for your form
• Configure your Form Mapping in Chili Piper

Customize the API for your form

You will want to first copy and paste this code into a text or code editor as there are a few changes you will need to make:

<script src="https://js.chilipiper.com/marketing.js" type="text/javascript"></script>
<script>
const tenantSubdomain = "[[tenant_domain]]"; // REPLACE
const tenantRouter = "[[tenant_router]]"; // REPLACE
MktoForms2.whenReady(function (form) {
form.onSuccess((values) => {
ChiliPiper.submit(tenantSubdomain, tenantRouter, { map: true });
return false;
});
});
</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, you will want to add this new code below your Marketo form.

Configure your Form Mapping in Chili Piper

The Javascript API provides more control over how data is submitted upon form submit. When using the API, we have submitted the values using Salesforce Lead Object structure so this is how the fields will need to be mapped. 

Process #2 in this help article outlines in more detail how to set up the correct mapping when using the API and actively passing values through the code.