In-App Chili Piper Use Cases – Chili Hub

Chili Piper can capture hidden form data to route your prospects to specific teams like support. No form-fill is needed as all information is gathered through the login session.

In this article, we will walk through:

How do I set up In-App calls to Chili Piper?

How do I set up In-App calls to Chili Piper?

There are some options you could evaluate, as shown below.

Option 1

First, you will need to set up a lead object. Depending on your CRM and whether you're updating any fields on the prospect's object, the fields you use may vary. Note that the Email field is mandatory in most cases.

Below is an example of code used to call Chili Piper. The first code line loads the Chili Piper JS library into the browser. The following code lines are for the API call that triggers the router on a button click.

In this example, we are populating three fields: FirstName, LastName, and Email from a Global Window variable, but you can populate these from anywhere they are stored, e.g., Session endpoint, Server-side session, cookie, global variable, and so forth. This will depend on how your app stores user data.

<button id="inappSubmit">Book a call</button>
<script src="https://DOMAIN.chilipiper.com/concierge.js" type="text/javascript"></script>
<script>
document.getElementById("inappSubmit").addEventListener("click", function(e){
ChiliPiper.submit("DOMAIN", "ROUTER",
trigger: 'ThirdPartyForm',
{
lead: {
FirstName: window.firstname,
LastName: window.lastname,
Email: window.email
}
});
});
</script>

DOMAIN and ROUTER will be references to your actual account subdomain and the name of the router you want to route to.

You can confirm such variables in your Concierge Router's Embed page by expanding the On a Website or the On a Website and/or Web App options and selecting any Form Type or Trigger:

In the lead object, the left-hand side before the colon (:) needs to be filled out with Chili Piper's Data Fields naming. An easy approach to find their naming would be adding them to your Router's Trigger, under the Button is clicked in-app option:

Then, navigate back to the Embed page, expand On a Website and/or Web App, then Button is clicked in-app. You will notice the lead object will be like this, with the naming already filled out.

Note, this might not be the snippet you would use for your use; this is more of an example.

<script id="chilipiper-concierge" src="https://vandenberghe.chilipiper.io/concierge-js/cjs/concierge.js" crossorigin="anonymous" type="text/javascript"></script>
  <script>
    ChiliPiper.submit("domain", "router", {
      trigger: 'InAppButton', 
      lead: {
        "email2": "", // replace the value with the value for Email
        "personfirstname": "", // replace the value with the value for First Name
        "CompanyEmployees": "", // replace the value with the value for Company Size
      }
    });
  </script>

After the colon (:), add the values from your source that will be mapped to Chili Piper. These values need to be replaced with the JavaScript variable that contains the data from your form or the source you are submitting from.

For example, if your form stores the user’s data in form field names named:

email
firstname
company_size

Using our example above, your mapping should look similar to the following. Note that the form field naming might be different from Chili Piper's Data Field naming, as they are not directly correlated.

lead: {
 "email2": window.email,
 "personfirstname": window.firstname,
 "CompanyEmployees": window.company_size,
}

Option 2

If you want to use a router's booking link within your marketing automation, mailer, chat, in-app button, and so forth, this is possible by obtaining the router's embed link from the Inbound Router settings.

Browse to your Inbound Router and open the "Embed" section. Copy the URL:

In this case, you could load a router link directly into an iframe in-app. You can pass the user's email address to the end of the queue link with an ID “smart tag.” If the person is already in Salesforce or HubSpot, this ID tag ensures they don’t need to fill out any forms before booking a meeting.

Example router link:

https://DOMAIN.chilipiper.com/concierge-router/link/ROUTER_NAME?id=test@test.com&LastName=test

To pass hidden form field values, simply append them as query parameters on the end, as the example above shows with &fieldname=value

To learn more about smart tags, see the article here.

Option 3

An alternative option could be used if you only need to route through one Scheduling Link (e.g., a simple Round-Robin, Ownership-based, and so on).

In this case, you could load a scheduling link directly into an iframe in-app. For example, you can pass the user's email address to the end of the queue link via an ID Smart Parameter, and if the person is already in Salesforce or HubSpot, this ID tag will ensure they do not need to fill out any forms before booking a meeting.

Example from a Round-Robin Scheduling Link:

https://DOMAIN.chilipiper.com/round-robin/LINK_NAME?id=test@test.com

You would pass the email address the same way as the above lead object - through your user's existing session.

To learn more about Smart Parameters, we recommend checking the following articles:

How do I set up In-App calls to Chili Piper?

Option 1

Option 2

Option 3

Related articles