This document is intended to explain step-by-step, how to use SendGrid in OnPing to send automated messages via emails. If you have any questions, the OnPing support team is here to help.
This step-by-step guide will walk through the procedures for integrating SendGrid into OnPing and will demonstrate the implementation process. Signing up for SendGrid must be done first because the system is developed utilizing a JSON payload through SendGrid. Next, the creation of an email template is performed utilizing SendGrid’s design library. The design library elements can be customized to create a professional email template. Finally, the integration process is completed by configuring OnPing with the SendGrid API Key and ensuring successful email delivery.
About SendGrid #
SendGrid is a cloud-based email delivery and management platform that enables companies and developers to send and manage transactional messages at scale. These messages may include formats such as emails, newsletters, etc. It offers extensive tools for managing subscribers, tailoring content, and measuring email conversion rate in addition to a dependable and secure infrastructure for sending and tracking email campaigns. Businesses may automate email workflows, increase deliverability rates, and enhance customer interactions and support by integrating SendGrid into their apps.
Benefits of Utilizing SendGrid #
There are several benefits of using SendGrid for email delivery, including:
- High Deliverability Rates: SendGrid has a strong reputation for delivering emails reliably and avoiding spam folders.
- Scalability: SendGrid is capable of handling above average volumes of data, due to dedicated servers, making it a good choice for businesses that need to send emails to many recipients.
- Robust API: SendGrid’s API allows for easy integration with various applications and systems, enabling users to automate their email workflows in OnPing.
- Detailed Analytics: SendGrid provides analytics on email performance, including open rates, click-through rates, and more, which will help senders optimize their email campaigns.
- Customization: SendGrid offers a variety of tools for customizing and creating personalized messages via email, allowing businesses to tailor their communications requirements to individual recipients.
SendGrid Setup and Configuration #
Step 1: Log into SendGrid
(This step can be skipped if there is already an existing SendGrid account.) In addition to an Onping account, a SendGrid account is also required to continue this integration. Navigate to SendGrid.com in the browser window and sign up for a free account.
Click the ‘Sign In’ button at the top right of the toolbar on the main SendGrid page. This will enable the sign-in screen. If SendGrid account credentials are unavailable, create a SendGrid account by clicking on the text below the blue ‘Log In’ button that says ‘Don’t have a Twilio SendGrid account? Sign up now!’
Step 2: Creating an Email Template
Once logged into SendGrid, navigate to the left side of the window and click the ‘Design Library’ panel from the dashboard. This will open the current designs in the library as well as options for creating new custom email templates.
Next, click the blue ‘Create Email Design’ button to create a new email template design.
Email templates can be designed with the built-in Design Editor or with the Code Editor. In this example, the Design Editor will be used to create this new template.
Once in the Design Editor, start customizing the new email template by removing the irrelevant information for the task. In this example, the highlighted text that includes the variables for the sender information is not needed every single time an email is sent.
This email template is generated as the default but a new custom default template can be created by saving a new copy of this template. To remove the highlighted text containing the sender information, navigate to the left side of the screen and toggle the ‘Address Line’ ‘OFF’
To remove the rest of the sender information, toggle the ‘Unsubscribe Preferences’ ‘OFF’.
Save the new template by navigating up to the toolbar at the top left of the SendGrid Design Editor window. Notice that the sender information is no longer included in the ‘Unsubscribe’ Block of the template.
If the ‘Unsubscribe Module Styles’ panel on the left does not automatically close when the template is saved, the x in the top right corner of the panel can be clicked to return to the main editing screen.
Name the new template. In this example, the Email Design Name will be ‘Demo Email 2’.
Next, assign the email template a subject. In this example, the subject for this new template is ‘Hello From OnPing!’.
Save the new template and navigate to the ‘Build’ tab, to the right of the ‘Settings’ tab that contains the email name and subject. Some default text will be inserted into the template for demonstration.
Hover over the module desired to be added to the template. Notice a square appears around the current selection.
Click and drag the ‘text’ icon into the template to the right to create a new text block.
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups such as this.
Replace the Lorem ipsum text with something more applicable to the template. Highlight the text and type the new message in order to overwrite.
In this example the new message is: ‘This is a message from your friendly Automation Platform!’
Step 3: Creating a Dynamic Template
Exit the design library and navigate back to the main SendGrid page. Click ‘Dynamic Templates’ under the ‘Email API’ panel.
Click the blue ‘Create a Dynamic Template’ button at the top right corner of the window.
Name the new Dynamic Template. In this example the new template is named ‘Demo Video 2’. Once the template has been named, click the blue ‘Create’ button just under the name text bar.
Click the carat icon next to the newly created dynamic template ‘Demo Video 2’ to display more information about the template.
Click the ‘Add Version’ button at the bottom of the template option window to add a version of this dynamic template.
Select the design from the previous step. In this example, it’s named ‘Demo Email 2’.
Select the Design Editor from the editing options. Alternatively, Code Editor can be used to edit this dynamic template.
Give the Dynamic Template Version an applicable name. In this example the template version is named ‘the second template from the video’
Once the version has been named, click the ‘Save’ button on the toolbar at the top of the window.
Click the ‘Preview’ button just to the left of the ‘Save’ button to preview the template and access test data.
Click the ‘{} Show Test Data’ button on the left side of the screen.
This is where the JSON payload will be copy and pasted from OnPing:
Step 4: JSON Payload Example
In this example, the following code will be copy and pasted in order to generate the JSON payload containing the Company, Site, Location, Result, Description, and Display. More information about this code: https://onping.net/docs/send-grid-integration-payload-format/
{
"cells": [
{
"company": "Demo Video Company",
"site": "Demo Video Site",
"location": "Demo Video Location",
"result": 11.83,
"descrption": "Battery Voltage",
"display": "01/27/2023- 03:22:00"
},
{
"company": "Demo Video Company",
"site": "Demo Video Site",
"location": "Demo Video Location",
"result": 11.83,
"descrption": "Battery Voltage",
"display": "11.83"
}
]
}Copy and paste the code into the test data text area. Click save and return to the Design window.
Now the Company, Site, Location, Result, Description and Display can be polled. In this example, the ‘Battery Voltage’ will be polled from the payload.
In the Design editor, add an instance of the Battery Voltage value in the text block from earlier. In this example, the text added states ‘My battery voltage is {{cells.[1].display}} volts. It updated at: {{cells.[0].display}}.’
{{}} indicates that something is being polled from the payload. In this instance, the display value from cell 1 will be displayed for the first variable and the display value from cell 0 will be displayed for the second variable.
Note that the Result and Display values are the same. By choosing the Display value, it can later be altered in OnPing if needed as opposed to the result value which cannot be altered.
Once the text box has been edited, click Save.
Next, click the Preview button just to the left of the Save button.
Note that the variables from cell 1 and cell 0 are being displayed as their values respectively.
‘My battery voltage is 11.83 volts. It updated at: 01/27/2023 – 03:22:00.’
Step 5: Creating a SendGrid API Key
Now that the variables are working correctly, navigate back to the main SendGrid page to add an API Key. Click the arrow in the top left corner on the toolbar to return to the main page.
On the toolbar to the left, click the ‘Settings’ panel to display a dropdown options menu. Click ‘API Keys’.
Once on the API Keys page, click the blue ‘Create API Key’ button at the top right corner of the window.
Give the new API Key an applicable name. In this example, the new API Key is named ‘DemoVideo2API-Key’. Once the API Key is named, click the blue ‘Create & View’ button at the bottom of the window.
Copy the API Key and navigate to OnPing in the browser window.
Step 6: OnPing Event Table Example
The Demo Video Event Table is where the data is generated from for the payload. In the previous example, cell 1 was named ‘Voltage’. In this Event Table Example, cell 1 is named ‘Manual Batch Point’
Step 7: Creating a SendGrid Panel
Navigate to the top right corner in OnPing and click the gray ‘Edit Dashboard’ button.
Navigate to the left side of the window and click the ‘+ Add Panel’ button at the top of the Dashboard to add a SendGrid panel.
Name the new panel. In this example the panel is named ‘Send Grid’. Give the new panel an applicable icon. The envelope icon is chosen for this panel because SendGrid is an email integration platform.
Once the new Panel has been named and the icon has been chosen, click the blue ‘Save Changes’ button.
A notification from OnPing will appear stating that the ‘Dashboard has been saved.’
Step 8: Adding SendGrid Integration Widgets
Now that the panel has been saved, navigate to the newly created panel and click the blue ‘+ Widget’ button at the top right corner of the panel window.
Scroll to the bottom and find the ‘Integrations’ widgets list. Click the blue ‘Add’ button next to SendGrid Integration.
Now that the SendGrid Integration widget has been added, navigate back to the + Widgets’ to add the Link Creator widget.
Click the blue ‘Add’ button next to the SendGrid Integration Link Creator widget.
The newly created ‘Send Grid’ panel should look like this:
Now that the panel has been populated with the necessary widgets, click the blue ‘Save’ button at the top right corner of the panel window.
A notification in OnPing will appear stating that the ‘Dashboard has been saved.’
Click the gray ‘Exit Edit Dashboard’ button at the top right of the panel to exit edit mode.
Step 8: Configuring SendGrid Integration Widgets
Navigate to the ‘Send Grid’ Panel and name the integration something applicable. In this example, the Integration Name is ‘Demo Video Integrations’.
Next, paste the API Key copied from Step 5 into the SendGrid Account API Key text bar.
Enter the email associated with the SendGrid account into the ‘SendGrid Email’ text bar.
Next, select the lowest user group with permission access. In this example the group ‘PostOakUsers’ is the lowest permission group.
Click the green ‘Save’ button at the bottom of the new integration window.
A notification in OnPing will appear stating that the ‘SendGrid Integration [has been] created’.
If the new integration does not appear in the SendGrid Event Link table, refresh the browser window.
Now that the integration is set up, links will need to be created. One integration can send multiple links with multiple emails. Click the check box next to the newly created integration ‘Demo Video Integrations’.
Create a new link by clicking the blue ‘+ Create New’ button in the Event Link Table.
Give the Event Link a name. This link is going between the event table and a particular template. In this example, the event link name is ‘Demo Video 2 Link’.
In this example, the ‘Demo Video 2’ SendGrid template will be used. To select a template, click the checkbox to the left of the template name.
‘Link’ the Event Table and the Template by clicking the checkbox to the left of the Event Table. In this example, the ‘Demo Video Event Table’ from Step 6 is selected from the Event Table drop down list.
To quickly preview an Event Table, click the carat icon next to the Event Table name.
Next select the recipient’s email address and click the green ‘Save’ button.
A notification in OnPing will appear stating that ‘Successfully created the event link ‘Demo Video 2 Link’.
Now when a new event is entered into the ‘Demo Video Event Table’, an email will be sent to the recipient using the ‘Demo Video 2’ template.
An Event Link can be toggled On or Off making it simpler to assign Event Links without deleting them.
Conclusion #
SendGrid, a cloud-based email delivery and management platform, enables businesses and developers to send and manage transactional messages at scale. Users can automate their email workflows, improve customer interactions and support, and boost deliverability rates by integrating SendGrid with OnPing. This step-by-step tutorial explains how to register for SendGrid, develop an email template using the SendGrid design library, and configure OnPing with the SendGrid API key to guarantee successful email delivery. For email distribution, using SendGrid has advantages including high deliverability rates, scalability, a strong API, in-depth analytics, and customization possibilities. The OnPing support staff is here to help you if you run into any issues.
