Skip to content
This repository has been archived by the owner on Aug 27, 2021. It is now read-only.

Commit

Permalink
Merge pull request #1848 from sendgrid/develop
Browse files Browse the repository at this point in the history
5/31/2016 Docs Update
  • Loading branch information
eschallock committed May 31, 2016
2 parents f76a60c + 7d2503f commit 4f093bd
Show file tree
Hide file tree
Showing 28 changed files with 107 additions and 87 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,10 @@ <h3><a href="#Whitelist">Whitelist</a></h3>
]
{% endcodeblock %}

{% info %}
As explained in the <a href="{{root_url}}/Classroom/Basics/API/api_key_permissions.html">Classroom</a>, Billing permissions are mutually exclusive from all others. An API Key can *either* have Billing Permissions, or any other set of Permissions.
{% endinfo %}

{% anchor h2 %}Categories{% endanchor %}

{% codeblock %}
Expand All @@ -99,17 +103,6 @@ <h3><a href="#Whitelist">Whitelist</a></h3>
]
{% endcodeblock %}

{% anchor h2 %}Clients{% endanchor %}
{% codeblock %}
"scopes": [
"clients.desktop.stats.read",
"clients.phone.stats.read",
"clients.stats.read",
"clients.tablet.stats.read",
"clients.webmail.stats.read"
]
{% endcodeblock %}

{% anchor h2 %}Credentials{% endanchor %}
{% codeblock %}
"scopes": [
Expand All @@ -129,7 +122,12 @@ <h3><a href="#Whitelist">Whitelist</a></h3>
"browsers.stats.read",
"devices.stats.read",
"geo.stats.read",
"mailbox_providers.stats.read"
"mailbox_providers.stats.read",
"clients.desktop.stats.read",
"clients.phone.stats.read",
"clients.stats.read",
"clients.tablet.stats.read",
"clients.webmail.stats.read"
]
{% endcodeblock %}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,12 @@ navigation:

Excessive notifications can become the needy partner of email. We try to keep up with them but eventually, we give up and toss them to the wolves. We have seen the frequency of spam complaints from a single recipient increasing. Recipients are having their mailboxes flooded with notifications and must resort to selecting all of their notifications then reporting them as spam. This flood of spam complaints then makes the mailbox provider think that sender is spamming and will begin to throttle, filter, or block their messages. Now the sender is having deliverability problems and the recipient wants to have nothing to do with the sender. There are solutions!

** **

1. Put the power in the hands of the people. Notifications should be for the people and controlled by the people. Let people set their preferences for frequency and notification type at account creation time. Some people may want your service, but do not want any email notifications. Others may only want certain types of notifications.

** **

2. Create a setting where recipients can choose how they would like to be notified. Every time activity happens does not warrant an email. Group notifications in one email daily, weekly or even monthly but make it clear that the recipient can choose the frequency.

** **

3. We are now in the age of smart phones. A recent study by [ReturnPath](http://www.returnpath.com/wp-content/uploads/resource/email-mostly-mobile/Return-Path-Email-Mostly-Mobile1.jpg) revealed that the majority of emails are viewed on mobile devices. This means that the space in which people are able to view their emails has decreased. Also, people are checking their email on the go with less time to scroll through their emails. The stakes have risen for each time an email is sent to a recipient. Use your recipients time wisely.

** **

4. Caution! For those of our sender’s that also use Facebook as their main platform. Notification frequency is more important than ever. Some of our senders have reported having issues getting blocked by Facebook has been cracking down on their “notification spam”. Read [this article](http://www.huffingtonpost.com/2013/03/11/facebook-apps_n_2850893.html) from Rueters for polemic advice. Facebook notifications should be treated like any other email.

Notifications are a great way to maintain contact and establish a relationship with your recipients. Like any relationship, communication is the key to success. Just make sure that when you do communicate, it is to the benefit of both the sender and the recipient.
Expand Down
96 changes: 65 additions & 31 deletions source/User_Guide/Transactional_Templates/create_edit.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,7 @@ navigation:
show: true
---


Creating email templates involves a mix of content writing, HTML, and CSS expertise. Email templates should look good on
different email clients and be responsive for mobile devices. Many non-technical customers will hire a front end or email
template developer to build their templates. We also suggest testing your templates with rendering applications like [Litmus](http://litmus.com)
before sending them to your customers.
Creating email templates involves a mix of content writing, HTML, and CSS expertise. Email templates should look good on different email clients and be responsive for mobile devices. Many non-technical customers will hire a front end or email template developer to build their templates. We also suggest testing your templates with rendering applications like [Litmus](http://litmus.com) before sending them to your customers.

{% info %}
There is currently a limit of 300 templates and 300 versions that may be created per account.
Expand All @@ -28,13 +24,21 @@ Create a Template

When you first visit the transactional templates page, you will be asked to create your first template.

<a href="{{site.app_url}}/templates/new">![](/images/template_engine_17.png "Add a Template")</a>
<a href="{{site.app_url}}/templates/new">![](/images/template_engine_4.png "Add a Template")</a>

Click “Create Template” and you’ll be asked to add a Template Name.

![](/images/template_engine_7.png "Template Name")
![](/images/template_engine_6.png "Template Name")

When you hit save, your new template group will be created.

![](/images/template_engine_7.png "Template Group")

You can then open the actions dropdown menu to create a new version.

![](/images/template_engine_8.png "Create Template Version")

When you hit save, you will be taken to the editor. From here, you can change the subject and the body of your email template.
When you click Add Version, you will be taken to the editor. From here, you can change the subject and the body of your email template.

The easiest way to get started with a new template is to use one of your previous email templates or a free template from the internet, and then modify it to fit your needs.

Expand All @@ -48,53 +52,83 @@ Email templates are table-based HTML with inline or header styles, because some

To add a template, click the “Code” button in the header. Copy and paste your HTML code into the dark-background code editor, like so:

![](/images/template_engine_8.png "Editing your Template")

{% warning %}
You MUST have a <%subject%> tag in the subject and a <%body%> tag in your template.
{% endwarning %}

If you paste in an email template, it is likely that you will overwrite the default and very basic email HTML that is provided in the code editor. When you do this, you will remove the body placeholder tag <%body%>. When you do this, the editor will show the following notification.
![](/images/template_engine_9.png "Editing your Template")

![](/images/template_engine_4.png "required tags for templates")
If you paste in an email template, it is likely that you will overwrite the default and very basic email HTML that is provided in the code editor.

As soon as you add <%body%> back into the content, the warning will go away.
![](/images/template_engine_10.png)

![](/images/template_engine_15.png "The Code Editor for transactional templates")

When you’re done editing, just hit the save button to keep all your changes. If you have not manually entered your content into the plain text editor, then you will get a notification offering to pull this content from your HTML code. Please double check that the content is formatted the way you want before you send an email using this template.
When you’re done editing, just hit the save button to keep all your changes. Please double check that the content is formatted correctly before you send an email using this template.

To get the to the plain text editor, find the text icon in the editor header bar.

![](/images/template_engine_10.png "Design/Code Switch")
![](/images/template_engine_11.png "Design/Code Switch")

{% anchor h2 %}
Send a Test
Preview and Test Your Template
{% endanchor %}

We suggest that when you’re done making changes with your template and before you activate your template, you should send a test.
We suggest that when you’re done making changes to your template, you preview and test it to ensure that the format and layout look the way you expect. We recommend that you always test your template before activating it.

<div class="row">

<div class="clearfix col-md-6">
When you select the “Preview” option, a sidebar window will pop out with a preview of the email that you’re going to test, with the option to view the template formatted for both mobile and desktop platforms.
<br>
<br>
You may send a test email using your new template from this window.
</div>
<div class="col-md-6">
<img src="{{root_url}}/images/template_engine_12.png" class="img-responsive pull-right"/>
</div>
<br>
</div>

![](/images/template_engine_13.png "Preview and Test")

![](/images/template_engine_12.png "Send a Test Menu")
If you click the Send Test button, you will be given the option of specifying the recipient, and subject line, of your test email.

When you select the “Send a Test” option, a sidebar window will pop out with a preview of the email that you’re going to test. The test email will be sent to the admin email on your account. Your substitution tags will not be replaced in this test, but you will be able to see the layout and format of your template email in your own email program.
![](/images/template_engine_14.png "Send Test")

Your substitution tags will not be replaced in this test, but you will be able to confirm the layout and format of your template.

{% anchor h2 %}
Activate Your Template
{% endanchor %}

![](/images/template_engine_11.png "Make Your Template Active")

A template can only have one active version at a time. If you’ve created a new version with different HTML that you want your customers to start receiving, you’ll need to make that Version “Active.”
<div class="row">

Select the “Make Active” option from the gear icon menu next to the save button.
<div class="clearfix col-md-6">
A template can only have one active version at a time. If you’ve created a new version with different HTML that you want your customers to start receiving, you’ll need to make that Version “Active.”
<br>
<br>
Select the “Make Active” option from the gear icon menu.
</div>
<div class="col-md-6">
<img src="{{root_url}}/images/template_make_active.png" class="img-responsive pull-right"/>
</div>
<br>
</div>

{% anchor h2 %}
Duplicate a Template
{% endanchor %}

![](/images/template_engine_13.png "Duplicate your template")
<div class="row">

<div class="col-md-6">
<img src="{{root_url}}/images/templates_duplicate_version.png" class="img-responsive pull-left"/>
</div>

<div class="clearfix col-md-6">
When you’re ready to create a new version of your template, you can select the “Duplicate” option from the gear icon menu near the save button.
<br>
<br>
This creates a clone, giving it a name including the original version name, the word “clone,” and today’s date. This duplicate version will not be active until you activate it.
</div>

When you’re ready to create a new version of your template, you can select the “Duplicate” option from the gear icon menu near the save button. This creates a clone, giving it a name including the original version name, the word “clone,” and today’s date. This duplicate version will not be active until you activate it.
<br>
</div>

{% anchor h2 %}
Unsubscribe Substitution Tags
Expand Down
38 changes: 12 additions & 26 deletions source/User_Guide/Transactional_Templates/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,8 @@
show: true
---

<iframe src="https://player.vimeo.com/video/130480159" width="500" height="312" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<p>
SendGrid's <a href="{{site.app_url}}/templates">transactional templates</a> give you unmatched simplicity, flexibility, and
control in the management of your email content and design. Get your templates out of your app and instead let your app
leverage our transactional templates! Transactional templates enable seamless collaboration between marketers, developers, and designers,
allowing each to work within SendGrid's user interface to edit and create email templates for transactional emails.
SendGrid’s <a href="https://app.sendgrid.com/templates">transactional templates</a> give you unmatched simplicity, flexibility, and control in the management of your email content and design. Get your templates out of your app and instead let your app leverage our transactional templates! Transactional templates enable seamless collaboration between marketers, developers, and designers, allowing each to work within SendGrid’s user interface to edit and create email templates for transactional emails.
</p>

{% info %}
Expand All @@ -31,30 +26,22 @@ <h3>
<a href="{{root_url}}/User_Guide/Transactional_Templates/create_edit.html">Create and Edit Your Templates</a>
</h3>

Templates and versions work together to allow you to easily and quickly iterate. Each version can have its own unique name, content, and subject. You may insert and edit HTML and inline CSS in your transactional templates visually or with a code editor. Plain-text content is supported as well.

</div>
<div class="col-md-6">
<img src="{{root_url}}/images/template_engine_9.png" class="img-responsive pull-left"/>
</div>
</div>

Templates and versions work together to allow you to easily and quickly iterate. Each version can have its own unique name, content, and subject. You may insert and edit HTML and inline CSS in your transactional templates visually or with a code editor. Plain-text content is supported as well.

<div class="row">
<div class="clearfix col-md-6">
<img src="{{root_url}}/images/template_engine_2.png" class="img-responsive"/>
</div>
<div class="col-md-6">
<h3>
<a href="{{root_url}}/User_Guide/Transactional_Templates/manage.html">Manage Your Templates</a>
</h3>

Update, add versions, and manage your templates in an easy to use interface. Keep your most recent template versions
active and work on your new versions until they’re ready.
<img src="{{root_url}}/images/template_engine_1.png" class="img-responsive pull-right"/>
</div>
</div>

<h3>
<a href="{{root_url}}/User_Guide/Transactional_Templates/manage.html">Manage Your Templates</a>
</h3>
<p>
Update, add versions, and manage your templates in an easy to use interface. Keep your most recent template versions active and work on your new versions until they’re ready.

<img src="{{root_url}}/images/transactional_templates_2.png" />
</p>

<div class="row">
<div class="clearfix col-md-6">
Expand All @@ -67,7 +54,7 @@ <h3>
and our <a href="{{root_url}}/API_Reference/SMTP_API/apps.html#templates">SMTP API docs</a>.
</div>
<div class="col-md-6">
<img src="{{root_url}}/images/template_engine_3.png" class="img-responsive pull-left"/>
<img src="{{root_url}}/images/template_engine_3.png" class="img-responsive pull-right"/>
</div>
</div>

Expand All @@ -79,6 +66,5 @@ <h3>
Start Now!
{% endanchor %}

Start using our Transactional Templates now by creating your first Template!
<a href="https://sendgrid.com/templates"><img src="{{root_url}}/images/template_engine_6.png" class="img-responsive center-block"/></a>
<a href="https://sendgrid.com/templates"><img src="{{root_url}}/images/template_engine_4.png" class="img-responsive center-block"/></a>
</div>
30 changes: 20 additions & 10 deletions source/User_Guide/Transactional_Templates/manage.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,35 @@ navigation:
show: true
---

Each template you create will have a grouping of versions for this template. This allows you to see where you’ve been and create new versions without using them until you make them active. Only one version can be active per template.
Each template you create will have a grouping of versions for this template. This allows you to see where you’ve been and create new versions without using them until you make them active.

{% anchor h2 %}
Changing Your Templates View
{% endanchor %}
Only one version can be active per template.

When viewing your transactional templates, you may choose to display, or hide, any inactive template versions.

![](/images/template_engine_18.png "Changing your template list view")
![]({{root_url}}/images/transactional_templates_show_versions.png "Show inactive template versions.")

![]({{root_url}}/images/transactional_templates_hide_versions.png "Hide inactive template versions.")

As you create new templates, you may find that a list view might be more suitable to scrolling through your templates. To switch the view, find the view options next to the “Create Template” button and select the list or box view option.

{% anchor h2 %}
Managing Templates
{% endanchor %}

![](/images/template_engine_14.png "Managing your Templates")
<div class="row">
<div class="col-md-6">
From the main template view on each template group, you will see an actions menu. From this menu, you can choose to edit the name of your template, add a version, preview and test, or delete the template.
</div>
<div class="col-md-6">
<img src="{{root_url}}/images/template_engine_18.png" class="img-responsive pull-right"/>
</div>
<br>
</div>

You will also see a gear icon for each template version. Clicking this presents a menu allowing you to preview and test, edit, duplicate, and delete the template version. You can also use the preview modal to send a test.

From the main template view on each template group, you will see a gear icon menu. From this menu, you can choose to edit
the name of your template, [add a version]({{root_url}}/User_Guide/Transactional_Templates/create_edit.html), or delete the template.
![]({{root_url}}/images/template_engine_19.png)

{% info %}
To delete a template, you must first delete all the versions of your template.
{% endinfo %}
{% endinfo %}
Binary file modified source/images/template_engine_1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified source/images/template_engine_10.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified source/images/template_engine_11.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified source/images/template_engine_12.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified source/images/template_engine_13.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified source/images/template_engine_14.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified source/images/template_engine_15.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added source/images/template_engine_16.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified source/images/template_engine_18.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added source/images/template_engine_19.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified source/images/template_engine_4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified source/images/template_engine_5.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified source/images/template_engine_6.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified source/images/template_engine_7.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified source/images/template_engine_8.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified source/images/template_engine_9.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added source/images/template_make_active.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added source/images/templates_duplicate_version.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added source/images/templates_edit.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added source/images/templates_preview_and_test.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added source/images/transactional_templates_2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 4f093bd

Please sign in to comment.