Email blasting is a commonly desired feature when it comes to CRMs. Sending a single template email to a list of customers in Kintone can be done with the SendGrid plugin, or KDDI Bulk Send plugin. It can also be done via a Zapier integration. In this tutorial, a custom button will be created in the list view of a Kintone app with JavaScript. When clicked, a list of email addresses from the Kintone app will be sent to a Zapier workflow. In Zapier, that list of email addresses will be looped on; all email accounts will be sent the same template email.
Sending Kintone data to a Zapier Webhook increases flexibility and functionality more than using a plugin. Zapier steps allow for filtering logic, and the creation of complex workflows. However, this tutorial will remain simple, with no conditional logic.
First, go to Zapier and create a new Zap:
Select the “1. Trigger”.
Add “Webhooks by Zapier” as the trigger step. Under Event, select “Catch Hook”.
Catch Hook will be able to “catch” the data being sent from Kintone.
After selecting “Continue”, leave the value for “Pick off a Child Key” blank.
Finally, under Test, the URL to the Catch Webhook is provided. In Kintone, our JavaScript code will send a list of customer emails to the URL link. Save this URL to replace in the JavaScript later.
In Kintone, navigate to your app with customer email data. In this tutorial, our Members app contains the email addresses of members. The following JavaScript code will be put into this Kintone app.
NOTE: Be sure to rename the email address Kintone fieldcode to “Contact_Email”. This fieldcode is used in the code.
Here is the JavaScript. Replace <Webhook URL> with the URL Zapier provided in the Catch Hook step, and replace the App ID in the request body. Save the file as “emailButton.js”.
(Note: Kintone Proxy is used to send the data to Zapier, to avoid CORS errors).
(() => {
'use strict'
const emailAddressFieldCode = 'Contact_Email';
const sendEmailsToWebhook = async (emailAddresses) => {
// REPLACE URL
let resp = kintone.proxy('<Webhook URL>', 'PUT', {'Content-Type': 'application/json'},{records: emailAddresses});
resp = await resp;
return resp;
}
const getCustomerEmailAddresses = async () => {
const body = {
// REPLACE APP ID
app: <App ID>
};
let resp = kintone.api(kintone.api.url('/k/v1/records.json', true), 'GET', body);
resp = await resp;
const records = resp.records;
const customerEmailAddresses = records.map((record) => {
return record[emailAddressFieldCode].value;
});
// Send the address list; Zapier Loop will use comma as a delimiter.
const emailString = customerEmailAddresses.join(",");
return emailString;
}
const createEmailButton = () => {
const button = document.createElement('button');
button.innerHTML = "Send Emails";
button.style.marginLeft = '10px';
button.style.marginBottom = '10px';
button.addEventListener('click', async (event) => {
const emailAddresses = await getCustomerEmailAddresses();
const response = await sendEmailsToWebhook(emailAddresses);
console.log(response);
});
return button;
}
kintone.events.on('app.record.index.show', (event) => {
const space = kintone.app.getHeaderSpaceElement();
const emailButton = createEmailButton();
space.append(emailButton);
});
})();NOTE: Kintone’s Get Records API has a limit of 500 records. If sending emails to more than 500 email addresses is needed, then please use Kintone REST API Client (and npm), or a use the Offset method of fetching the data.
Navigate to the App Settings, then to JavaScript and CSS Customization.
Upload the “emailButton.js” file, and select “Update App”.
The custom email button should now appear in the list view of the app.
Click the send emails button; the list of emails will be sent to the URL of the Catch Hook. In the Developer Tools of Chrome, the response sent back from Zapier can be seen.
The status from the response says “success.”
Navigate back to the Zapier scenario to see the data that has been sent over to the Catch Hook.
In the Test tab, the list of customer email addresses can be seen.
Next, create another step called “Looping by Zapier”. In the Event section of the step, select “Create Loop From Text”. This will repeat the step of sending an email for every address in the list.
Under “Text Delimiter”, the comma is used to split and create the list of email addresses. Zapier will perform a loop on this created list.
After setting the list of email addresses from the Catch Hook in the right section of “Values to Loop”, input a variable name in the left section (something like “Email’). “Email” will then be used in the Loop step of the Zap.
Under the “Test” tab the loop is created. The “Email” variable is displayed, and will be used in the Gmail step. The Gmail step will be repeated for every value in “Email”.
Finally, for the last step, select Gmail.
As for the Event, set it to “Send Email”. Send Email step will be performed on every customer in the customer list, as part of the looping functionality.
Set the “To” value for the email to “Email” from the Loop step.
Set the desired data for the Subject of the email, and for the body of the email.
Select “Publish”. Navigate back to Kintone and click the “Send Emails” button. All of your test email addresses will receive the template email.
Conclusion
In this article, we were able to send an email blast to a list of emails that are stored in Kintone, by using Zapier and JavaScript. This example can be further expanded to include conditional logic. For example, sending a different email template to customers of a certain “type” is possible, by using filters and “paths” in Zapier. By using JavaScript, it’s simple to send Kintone data to Zapier Webhooks with a custom button trigger. Zapier can also fetch data from Kintone on a scheduled basis, which will be discussed in further tutorials.
