Exporting a Dyspatch Template to SendGrid

Use Dyspatch and SendGrid together to simplify your email creation lifecycle and deliver engaging email experiences at scale.

Build and Approve in Dyspatch

In Dyspatch, use the drag and drop visual editor to create a beautiful, responsive, and engaging email template. Collaborate with your team to approve the template and publish it.

Once your template is published, you can move it into your SendGrid account by exporting it with our SendGrid integration, or you can download your template to upload it to SendGrid manually.

SendGrid Integration

Connect your SendGrid account to Dyspatch and export templates to your SendGrid account in a couple of clicks.

Connect your SendGrid Account

You will need to create a SendGrid API key with Full Access permissions enabled. You can also have Restricted Access permissions enabled, as long as you have Template Engine permissions set to Full Access. Once you have your SendGrid API key you are ready to set up your SendGrid integration in Dyspatch.

In the Administration portal, open your username drop-down menu, and select Integrations. Go to API Keys Page link in username dropdown

You may need to unlock integrations for your team's account. Reach out to our support team to get integrations set up.

Enter your SendGrid API key, select an export method for localized templates and add a short description that your team will see when exporting.

Localized Template Export Methods

Use Dyspatch to localize your template and you can create emails that support multiple languages or locations. With your new SendGrid integration you can choose to export localized templates with either the SendGrid property Language or Locale

Language will export your template's localizations using SendGrid's language attribute. Our SendGrid exporter will use only the language code set in the localization: en or fr

{{#equals language "en"}}Hello!{{else}}{{#equals language "fr"}}Bonjour!{{else}}Hello!{{/equals}}{{/equals}}

Locale will export your template utilizing SendGrid's locale attribute. Our SendGrid exporter will use the entire locale code from the localization: en-US or fr-CA

{{#equals locale "en-US"}}Hello!{{else}}{{#equals locale "fr-CA"}}Bonjour!{{else}}Hello!{{/equals}}{{/equals}}

Check with your team which localization option works best for your particular SendGrid account.

Exporting a Published Template with the SendGrid Integration

With a SendGrid integration added to Dyspatch after you click Download/Export you can now select Export to Integration and send your Dyspatch template to your SendGrid account.

Exporting a template to SendGrid with the SendGrid integration is fast

Exporting any newly published draft will update the template in Sendgrid. Any changes to the name once published will also update the template in SendGrid.

Find your template in the Email Api > Dynamic Templates section of your SendGrid account.

Downloading Your Email Template

Once your email has been reviewed and approved by your team's stakeholder, you can now export your template using the Download/Export button.

You will need to select the HTML/Handlebars option to be compatible with SendGrid's templating system.

Selecting the download button and exporting to handlebars for SendGrid

A zipped file will be downloaded onto your system with the HTML, plain text content, metadata, and localizations (if applicable).

Getting the HTML Source Code

Adding your email template into SendGrid requires you to copy and paste your email's HTML source code. To obtain this HTML, unzip the folder downloaded from Dyspatch and open the HTML file so you can copy its contents to add the email template to SendGrid.

Here's how to open the HTML file and copy the HTML using your web browser or the text editor that is pre-installed with Windows and MacOS.

Web Browser

Most web browsers will have a "View Page Source" option. The following screenshots will outline steps for Google Chrome.

Open the HTML file in a web browser, and right click the page to open a drop down menu. Select the View Page Source option.

Right click to dropdown menu options. Click the View Page Source option

You will be presented with the HTML source code and you can copy the HTML and add the content into SendGrid.

Showing the source code of the HTML

Text Editor

Windows

Notepad comes pre-installed with Windows operating systems, so you should be able to search for Notepad and open the HTML file. Once opened, you can copy the HTML and add the content into SendGrid.

MacOS

TextEdit comes pre-installed with MacOS operating systems, so you should be able to search for TextEdit and open the HTML file. Note that you may need to adjust your preferences to allow HTML files to be opened in code format.

In the preferences settings, click the "Open and Save" tab. Make sure the "Display HTML files as HTML code instead of formatted text" is enabled.

Once you have the HTML, you can copy the HTML and add the content into SendGrid.

Adding the Template to SendGrid

Navigate to the Design Library section and select Create Email Design.

SendGrid Design Library

Select the Code Editor option and paste in the HTML source code into the Code Editor and save your email.

Copy and Paste your HTML into the code panel within the code editor

Once you have your email in SendGrid, you will want to add in your Subject Line, Plain Text content, and any other sending information you downloaded from Dyspatch.

Your email is now ready to go from SendGrid! You can now create a Dynamic Template to send your transactional emails or create a Single Send email to send your marketing emails with the "Your Design" option.

Select your design from either the dynamic templates or single send options

For information on how to send emails through SendGrid, visit the following resources:

Didn't find what you're looking for?

Ask our support team, we're here to help!

Contact Support