Skip to content

Commit 2375190

Browse files
authored
Merge branch 'master' into develop
2 parents 05da3f0 + 77974a1 commit 2375190

File tree

6 files changed

+162
-19
lines changed

6 files changed

+162
-19
lines changed

src/_data/sidenav/main.yml

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -407,7 +407,9 @@ sections:
407407
- path: '/engage/content/email/template'
408408
title: Email Template
409409
- path: '/engage/content/email/editor'
410-
title: Email Template Editor
410+
title: Drag and Drop Editor
411+
- path: '/engage/content/email/html-editor'
412+
title: HTML Editor
411413
- path: '/engage/content/sms/template'
412414
title: SMS Template
413415
- path: '/engage/content/whatsapp'

src/engage/campaigns/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,6 @@ Use Engage to send [email](/docs/engage/campaigns/email-campaigns/) and [SMS cam
1919

2020
## Build email and SMS templates
2121

22-
With Engage, you can build [email](/docs/engage/content/email/template/) and [SMS templates](/docs/engage/content/sms/template/) to use throughout your campaigns. Build an email template using a visual editor or an HTML code editor. Personalize templates with merge tags and test your messages before you send them in campaigns.
22+
With Engage, you can build [email](/docs/engage/content/email/template/) and [SMS templates](/docs/engage/content/sms/template/) to use throughout your campaigns. Build an email template using a drag and drop or a visual HTML editor. Personalize templates with merge tags and test your messages before you send them in campaigns.
2323

2424
Engage saves the message templates for you to preview, maintain, and reuse throughout your campaigns.

src/engage/content/email/editor.md

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
---
2-
title: Email Template Editor
2+
title: Drag and Drop Editor
33
plan: engage-premier
44
---
5-
Use Twilio Engage to build email templates with a *what you see is what you get* (WYSIWYG) visual editor. Use drag and drop tools to design the template layout and include user profile traits to personalize the message for each recipient.
5+
Use Twilio Engage to build email templates with a *what you see is what you get* (WYSIWYG) Drag and Drop Editor. Use drag and drop tools to design the template layout and include user profile traits to personalize the message for each recipient.
66

7-
You can navigate to the visual editor from the **Select Editor** screen:
7+
You can navigate to the Drag and Drop Editor from the **Select Editor** screen:
88
- When you build a new email template or edit an existing one.
99
- From a Send Email step in a Journey.
1010

11-
From the **Select Editor** screen, select **Visual Editor** and click **Build Email**.
11+
From the **Select Editor** screen, select **Drag and Drop Editor** and click **Build Email**.
1212

13-
The visual editor consists of a [left sidebar](#left-sidebar) with design modules and an [email canvas](#email-canvas).
13+
The Drag and Drop Editor consists of a [left sidebar](#left-sidebar) with design modules and an [email canvas](#email-canvas).
1414

1515
## Left sidebar
1616

@@ -89,7 +89,7 @@ Select and drag and image into the canvas, then return to the sidebar to set ima
8989
## Upload an image
9090
Use the Uploads tool to upload an image for the email template. Click **Upload Image** to select an image stored locally or drag and drop images in the sidebar dropzone.
9191

92-
> note ""
92+
> info ""
9393
> The maximum image file size you can upload is 10 MB.
9494
9595
## Link actions
@@ -119,11 +119,11 @@ Add an unsubscribe link to text:
119119
You can alternatively add a [predefined unsubscribe](#add-blank-columns-or-predefined-content-blocks) link content block.
120120

121121
## Personalize with merge tags
122-
Add merge tags in the visual editor to personalize your message with user profile traits.
122+
Add merge tags in the Drag and Drop Editor to personalize your message with user profile traits.
123123

124124
1. Select any heading or body text in the email canvas. From the text toolbar, click **Merge Tags**.
125125
2. Select the profile traits to include from the drop down menu.
126-
3. Based on cursor placement, profile traits are added to the email from merge tags.
126+
3. Based on cursor placement, Engage adds merge tags to your email template.
127127

128128
Engage supports liquid templating to create dynamic content in the email design editor and the SMS editor.
129129

@@ -148,3 +148,13 @@ To view more examples related to your use case, visit the [LiquidJS docs](https:
148148
## Save the template
149149

150150
After you design the email, click **Create Email Template**.
151+
152+
153+
## Next steps
154+
155+
- Learn more about [building email templates](/docs/engage/content/template/) to include in your Engage campaigns.
156+
157+
- You can learn about the [HTML Editor](/docs/engage/content/email/html-editor) for both code and visual editing capabilities from a single view.
158+
159+
> warning ""
160+
> once you create an email with the Drag and Drop Editor, you can't modify it with the HTML Editor, and vice versa.
Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
---
2+
title: HTML Editor
3+
beta: true
4+
---
5+
6+
Use the HTML Editor to design your email template with both code and visual editing capabilities. Build your email template with code, copy and paste existing code, or use the visual editor for a code free design experience.
7+
8+
On this page, you'll learn how to use the HTML Editor to build personalized email templates for your Engage campaigns.
9+
10+
## Getting started
11+
12+
You can navigate to the HTML Editor in two ways:
13+
- When you build a new email template or edit an existing one.
14+
- From a Send Email step in a Journey.
15+
16+
From the **Select Editor** screen, select **HTML Editor** and click **Build Email**.
17+
18+
From the editor screen, click **Use HTML Editor** or **Use Visual Editor** to toggle between the two editors.
19+
20+
## Visual editor
21+
22+
Use the visual editor for a no-code option to design your email. With the visual editor, you can:
23+
- Add or modify headings and text
24+
- Modify text color, size, and style
25+
- [Insert an image](#insert-an-image)
26+
- Add [merge tags](#personalize-with-merge-tags) and links
27+
- Add emojis
28+
29+
Engage updates any changes you make in the visual editor to the HTML editor in real-time.
30+
31+
### Insert an image
32+
33+
To insert an image from the visual editor:
34+
1. Select the image icon in the visual editor toolbar.
35+
2. Add the image URL source and alternative text.
36+
3. Edit the image width and height.
37+
- You can also click and drag the corners of the image to resize it in the visual editor.
38+
4. Click **Save**.
39+
40+
41+
### Preview for desktop or mobile display
42+
43+
To preview your email template, click the preview icon in the visual editor toolbar.
44+
45+
From the preview screen, you can toggle between desktop or mobile to view the email in both displays.
46+
47+
## HTML editor
48+
49+
Use the HTML editor to maintain your email template with code. Copy and paste existing code or build a new template in the editor.
50+
51+
Engage displays any changes you make in a preview screen to the right of your code. You can preview your email in both desktop and mobile display.
52+
53+
Click **Format** at any time to properly indent and format your code in the HTML editor.
54+
55+
> info ""
56+
> When you toggle from the HTML editor to the visual editor, Engage may make minor changes to your code formatting. If Engage re-formats your code, it will not affect the email layout.
57+
58+
### Error flagging
59+
60+
Engage displays in-line error flags in the code editor to help you debug your code. If there are errors, you might not see content as expected in the preview screen until you've debugged your code.
61+
62+
## Personalize with merge tags
63+
Add merge tags to personalize your message with user profile traits.
64+
65+
1. From the text toolbar in the visual editor, click the **Merge Tags** drop-down menu.
66+
2. Select profile traits to add to the merge tags.
67+
3. Based on cursor placement, Engage adds merge tags to your template.
68+
69+
> success ""
70+
> You can also add merge tags to your email right from the code editor.
71+
72+
### Liquid templating
73+
74+
Engage supports liquid templating to create dynamic content in the HTML Editor.
75+
76+
{% raw %}
77+
78+
For example, use `{% if %}`, `{% elseif %}`, and `{% else %}` tags to call a product by name if known, or use a default message:
79+
80+
```
81+
{% if profile.traits.product_title == "Sneakers" %}
82+
Hey, view our latest sneakers!
83+
{% elsif profile.traits.product_title == "Sandals" %}
84+
Hey, check out these sandals!
85+
{% else %}
86+
Hey, check out our latest footwear.
87+
{% endif %}
88+
```
89+
{% endraw %}
90+
91+
If you use liquid templating, be sure to [test your email](/docs/engage/content/email/template/#test-the-email-template/) to make sure that everything renders properly.
92+
93+
> success ""
94+
> While both the HTML and visual editor support liquid templating, Segment recommends using the HTML editor to write liquid templating.
95+
96+
> warning ""
97+
> Engage doesn't support liquid template syntax that produces partial blocks of HTML.
98+
99+
To view more examples related to your use case, visit the [LiquidJS docs](https://liquidjs.com/tags/if.html){:target="blank"}.
100+
101+
## Add unsubscribe links
102+
It's always best practice to include an unsubscribe link in the emails you build. Engage adds an unsubscribe link to email templates, which you can edit at any time.
103+
104+
You can add unsubscribe links from the visual or HTML editor.
105+
106+
From the visual editor:
107+
108+
1. Select the link icon in the [visual editor](#visual-editor) toolbar.
109+
2. Enter `[unsubscribe]` in the URL field.
110+
3. Enter the link attributes and text.
111+
4. Click **Save**.
112+
113+
To add a link from the code editor, use `<a href = "[unsubscribe]"> </a>` in your HTML.
114+
115+
For more on email unsubscribe links, view SendGrid's [best practices](https://sendgrid.com/blog/managing-your-marketing-email-unsubscribes/){:target="blank"}.
116+
117+
118+
## Save the template
119+
120+
After you design the email, click **Create Email Template**. You can navigate to **Engage > Content > Templates** to view and maintain your email template.
121+
122+
## Next steps
123+
124+
- Learn more about [building email templates](/docs/engage/content/template/) to include in your Engage campaigns.
125+
126+
- You can also learn about the [Drag and Drop Editor](/docs/engage/content/email/editor/) in Engage to build Email templates with drag and drop functionality.
127+
128+
> warning ""
129+
> Once you create an email with the HTML Editor, you can't modify it with the Drag and Drop Editor, and vice versa.
130+
131+

src/engage/content/email/template.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ plan: engage-premier
44
---
55
Use Twilio Engage to build personalized email templates to store and use throughout marketing campaigns.
66

7-
Build an email template from scratch using a [visual editor](/docs/engage/content/email/editor/) or with an HTML code editor. Include [personalized content](#personalize-with-merge-tags) in the subject line, preview text, and email body to engage with users based on their profile traits and actions.
7+
Build an email template from scratch using the [Drag and Drop Editor](/docs/engage/content/email/editor/) or the [HTML Editor](/docs/engage/content/email/html-editor/). Include [personalized content](#personalize-with-merge-tags) in the subject line, preview text, and email body to engage with users based on their profile traits and actions.
88

99

1010
## Build an Email template
@@ -28,8 +28,8 @@ To configure an email template, click **Create Template**.
2828
5. Add email addresses to receive a blind carbon copy of your email.
2929
6. Add preview text and the subject line. Use [merge tags](#personalize-with-merge-tags) to personalize the email template with real-time profile traits.
3030
3. Select the design method to build your email template:
31-
- [**Visual Editor**](/docs/engage/content/email/editor/) is an easy to use, drag and drop WYSIWYG tool with customizable content blocks.
32-
- **HTML Editor** is an HTML editor with a side-by-side preview screen. This editor provides complete HTML editing access with error flagging.
31+
- [**Drag and Drop Editor**](/docs/engage/content/email/editor/) is a drag and drop WYSIWYG tool with customizable content blocks.
32+
- [**HTML Editor**](/docs/engage/content/email/html-editor/) contains both a code and visual editor from a single view. This editor provides complete HTML editing access with error flagging.
3333
4. Design the email template, then click **Create Email Template**.
3434

3535
## Test the Email template
@@ -52,15 +52,15 @@ Personalize email content in Twilio Engage with real-time profile traits in your
5252

5353

5454
As you configure the template, click **Merge Tags** and select the profile traits to include. Engage inserts the merge tags based on cursor placement.
55-
56-
You can also add merge tags in heading and body text as you design an email with the [visual editor](/docs/engage/content/email/editor/). Engage supports [liquid templating](https://liquidjs.com/tags/if.html){:target="blank"} to create dynamic content in the email design editor.
55+
56+
You can also add merge tags in the heading or body text as you design an email with the [Drag and Drop](/docs/engage/content/email/editor/) or [HTML](/docs/engage/content/email/html-editor/) editors. Engage supports [liquid templating](https://liquidjs.com/tags/if.html){:target="blank"} to create dynamic content in the email design editor.
5757

5858
> info ""
5959
> To learn more about profile traits, visit Segment's [Computed Traits](/docs/engage/audiences/computed-traits) and [SQL Traits](/docs/engage/audiences/sql-traits/) documentation.
6060
6161
## Include unsubscribe links
6262

63-
When you build email templates, it's your responsibility to include an unsubscribe link in your message. Add unsubscribe links to an email template from the [visual](/docs/engage/content/email/editor/) or HTML editor.
63+
When you build email templates, it's your responsibility to include an unsubscribe link in your message. Add unsubscribe links to an email template from the Drag and Drop or HTML editors.
6464

6565
When a recipient clicks on an unsubscribe link, they'll see a confirmation page and the recipient's subscription state is updated.
6666

@@ -81,6 +81,6 @@ After you clone a template, you can edit it from the Templates page.
8181

8282
## Next steps
8383

84-
View some [email deliverability tips and tricks](https://docs.sendgrid.com/ui/sending-email/deliverability){:target="blank"} from SendGrid.
84+
- View some [email deliverability tips and tricks](https://docs.sendgrid.com/ui/sending-email/deliverability){:target="blank"} from SendGrid.
8585

86-
You can also use the Templates screen in Engage to [build SMS templates](/docs/engage/content/sms/template/).
86+
- You can also use the Templates screen in Engage to [build SMS templates](/docs/engage/content/sms/template/).

src/engage/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ To learn more, visit the [CSV Uploader](/docs/engage/profiles/csv-upload/) docum
5151

5252
#### Build Email, SMS, and WhatsApp message templates
5353

54-
Build personalized [email](/docs/engage/content/email/template/), [SMS](/docs/engage/content/sms/template), and [WhatsApp](/docs/engage/content/whatsapp) templates in Twilio Engage for use in your campaigns. Design email templates with a WYSIWYG [visual editor](/docs/engage/content/email/editor/) or a code editor. Engage saves the templates for you to preview, edit, and reuse throughout Journeys.
54+
Build personalized [email](/docs/engage/content/email/template/), [SMS](/docs/engage/content/sms/template), and [WhatsApp](/docs/engage/content/whatsapp) templates in Twilio Engage for use in your campaigns. Design email templates with a WYSIWYG [Drag and Drop Editor](/docs/engage/content/email/editor/) or the [HTML Editor](/docs/engage/content/email/html-editor/). Engage saves the templates for you to preview, edit, and reuse throughout Journeys.
5555

5656
#### Personalize with merge tags
5757
Insert real-time user profile traits from merge tags to personalize each message. For example, address recipients by name or highlight new products from a user's favorite brand.

0 commit comments

Comments
 (0)