Skip to content

Commit 97ab66a

Browse files
4kimov4kimov
committed
readme + NewHeader/NewFooter
1 parent 6ee7221 commit 97ab66a

File tree

2 files changed

+208
-9
lines changed

2 files changed

+208
-9
lines changed

‎README.md

Lines changed: 201 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@
2323

2424
[Templateless](https://templateless.com) lets you generate and send transactional emails quickly and easily so you can focus on building your product.
2525

26+
It's perfect for SaaS, web apps, mobile apps, scripts and anywhere you have to send email programmatically.
27+
2628
## ✨ Features
2729

2830
- 👋 **Anti drag-and-drop by design** — emails are a part of your code
@@ -47,6 +49,16 @@ Then import the package into your own code:
4749
import "github.com/templateless/templateless-go"
4850
```
4951

52+
## 🔑 Get Your API Key
53+
54+
You'll need an API key for the example below ⬇️
55+
56+
[![Get Your API Key](https://img.shields.io/badge/Get_Your_API_Key-free-blue?style=for-the-badge)](https://app.templateless.com/)
57+
58+
- 3,000 emails per month
59+
- All popular email provider integrations
60+
- Start sending right away
61+
5062
## 👩‍💻 Quick example
5163

5264
This is all it takes to send a signup confirmation email:
@@ -80,18 +92,199 @@ func main() {
8092
}
8193
```
8294

83-
> **Note**
84-
> 🚧 **This SDK is not stable yet.** The API might change as more features are added. Please pay attention to the [CHANGELOG](CHANGELOG.md) for breaking changes.
95+
There are more Go examples in the [examples](examples) folder ✨
96+
97+
> [!NOTE]
98+
> 🚧 **The SDK is not stable yet.** This API might change as more features are added. Please watch the repo for the changes in the [CHANGELOG](CHANGELOG.md).
99+
100+
## 🔳 Components
101+
102+
Emails are crafted programmatically by making function calls. There's no dealing with HTML or drag-and-drop builders.
103+
104+
All of the following components can be mixed and matched to create dynamic emails:
105+
106+
<details>
107+
<summary>Text / Markdown</summary>
108+
109+
Text component allow you to insert a paragraph. Each paragraph supports basic markdown:
110+
111+
- Bold text: `**bold text**`
112+
- Italic text: `_italic text_`
113+
- Link: `[link text](https://example.com)`
114+
- Also a link: `<https://example.com>`
115+
- Headers (h1-h6):
116+
117+
- `# Big Header`
118+
- `###### Small Header`
119+
120+
- Unordered list:
121+
122+
```md
123+
- item one
124+
- item two
125+
- item three
126+
```
127+
128+
- Ordered list:
129+
130+
```md
131+
1. item one
132+
1. item two
133+
1. item three
134+
```
135+
136+
```go
137+
templateless.NewContent().
138+
Text("## Thank you for signing up").
139+
Text("Please **verify your email** by [clicking here](https://example.com/confirm?token=XYZ)").
140+
Build()
141+
```
142+
143+
</details>
144+
<details><summary>Link</summary>
145+
146+
Link component adds an anchor tag. This is the same as a text component with the link written in markdown:
147+
148+
```go
149+
templateless.NewContent().
150+
Link("Confirm Email", "https://example.com/confirm?token=XYZ"). // or...
151+
Text("[Confirm Email](https://example.com/confirm?token=XYZ)").
152+
Build()
153+
```
154+
155+
</details>
156+
<details><summary>Button</summary>
157+
158+
Button can also be used as a call to action. Button color is set via your dashboard's app color.
159+
160+
```go
161+
templateless.NewContent().
162+
Button("Confirm Email", "https://example.com/confirm?token=XYZ").
163+
Build()
164+
```
165+
166+
</details>
167+
<details><summary>Image</summary>
168+
169+
Image component will link to an image within your email. Keep in mind that a lot of email clients will prevent images from being loaded automatically for privacy reasons.
170+
171+
```go
172+
templateless.NewContent().
173+
Image(
174+
"https://placekitten.com/300/200", // where the image is hosted
175+
"https://example.com", // [optional] link url, if you want it to be clickable
176+
300, // [optional] width
177+
200, // [optional] height
178+
"Alt text", // [optional] alternate text
179+
).
180+
Build()
181+
```
182+
183+
Only the `src` parameter is required; everything else is optional.
184+
185+
**If you have "Image Optimization" turned on:**
186+
187+
1. Your images will be cached and distributed by our CDN for faster loading. The cache does not expire. If you'd like to re-cache, simply append a query parameter to the end of your image url.
188+
1. Images will be converted into formats that are widely supported by email clients. The following image formats will be processed automatically:
189+
190+
- Jpeg
191+
- Png
192+
- Gif
193+
- WebP
194+
- Tiff
195+
- Ico
196+
- Bmp
197+
- Svg
198+
199+
1. Maximum image size is 5MB for free accounts and 20MB for paid accounts.
200+
1. You can specify `width` and/or `height` if you'd like (they are optional). Keep in mind that images will be scaled down to fit within the email theme, if they're too large.
201+
202+
</details>
203+
<details><summary>One-Time Password</summary>
204+
205+
OTP component is designed for showing temporary passwords and reset codes.
206+
207+
```go
208+
templateless.NewContent().
209+
Text("Here's your **temporary login code**:").
210+
Otp("XY78-2BT0-YFNB-ALW9").
211+
Build()
212+
```
213+
214+
</details>
215+
<details><summary>Social Icons</summary>
216+
217+
You can easily add social icons with links by simply specifying the username. Usually, this component is placed in the footer of the email.
218+
219+
These are all the supported platforms:
220+
221+
```go
222+
templateless.NewContent().
223+
Socials([]components.SocialItem{
224+
*components.NewSocialItem(components.Website, "https://example.com"),
225+
*components.NewSocialItem(components.Email, "[email protected]"),
226+
*components.NewSocialItem(components.Phone, "123-456-7890"), // `tel:` link
227+
*components.NewSocialItem(components.Facebook, "Username"),
228+
*components.NewSocialItem(components.YouTube, "ChannelID"),
229+
*components.NewSocialItem(components.Twitter, "Username"),
230+
*components.NewSocialItem(components.X, "Username"),
231+
*components.NewSocialItem(components.GitHub, "Username"),
232+
*components.NewSocialItem(components.Instagram, "Username"),
233+
*components.NewSocialItem(components.LinkedIn, "Username"),
234+
*components.NewSocialItem(components.Slack, "Org"),
235+
*components.NewSocialItem(components.Discord, "Username"),
236+
*components.NewSocialItem(components.TikTok, "Username"),
237+
*components.NewSocialItem(components.Snapchat, "Username"),
238+
*components.NewSocialItem(components.Threads, "Username"),
239+
*components.NewSocialItem(components.Telegram, "Username"),
240+
}).
241+
Build()
242+
```
243+
244+
</details>
245+
<details><summary>View in Browser</summary>
246+
247+
If you'd like your recipients to be able to read the email in a browser, you can add the "view in browser" component that will automatically generate a link. Usually, this is placed in the header or footer of the email.
248+
249+
You can optionally provide the text for the link. If none is provided, default is used: "View in browser"
85250

86-
Examples:
251+
**This will make the email public to anyone that has access to the link.**
252+
253+
```go
254+
templateless.NewContent().
255+
ViewInBrowser("Read Email in Browser").
256+
Build()
257+
```
258+
259+
</details>
260+
261+
---
87262

88-
1. Get your **free API key** here: <https://app.templateless.com> ✨
89-
1. There are more Go examples in the [examples](examples) folder
263+
Components can be placed in the header, body and footer of the email. Header and footer styling is usually a bit different from the body (for example the text is smaller).
264+
265+
```go
266+
header, _ := templateless.NewHeader(). // header of the email
267+
Text("Smaller text").
268+
Build()
269+
270+
content, _ := templateless.NewContent(). // body of the email
271+
Text("Normal text").
272+
Build()
273+
```
274+
275+
Currently there are 2 themes to choose from: `Unstyled` and `Simple`
276+
277+
```go
278+
content, _ := templateless.NewContent().
279+
Theme(templateless.Simple).
280+
Text("Hello world").
281+
Build()
282+
```
90283

91284
## 🤝 Contributing
92285

93-
- Contributions are more than welcome <3
94-
- Please **star this repo** for more visibility ★
286+
- Contributions are more than welcome
287+
- Please **star this repo** for more visibility <3
95288

96289
## 📫 Get in touch
97290

@@ -101,7 +294,7 @@ Examples:
101294

102295
- For feature requests, please [start a discussion](https://github.com/templateless/templateless-go/discussions)
103296
- Found a bug? [Open an issue!](https://github.com/templateless/templateless-go/issues)
104-
- We are also on Twitter: [@Templateless](https://twitter.com/templateless)
297+
- Say hi [@Templateless](https://twitter.com/templateless) 👋
105298

106299
## 🍻 License
107300

‎collection.go

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,13 @@ type Collection struct {
1010
Components []components.Component `json:"components"`
1111
}
1212

13-
func NewCollection() *Collection {
13+
func NewHeader() *Collection {
14+
return &Collection{
15+
Components: make([]components.Component, 0),
16+
}
17+
}
18+
19+
func NewFooter() *Collection {
1420
return &Collection{
1521
Components: make([]components.Component, 0),
1622
}

0 commit comments

Comments
 (0)