How to Import HTML Emails into Beefree SDK with the New HTML Importer API

About

Want to turn static HTML emails into fully editable Beefree SDK templates in seconds? In this video, we’ll show you exactly how to use the new Beefree SDK HTML Importer API to programmatically convert existing HTML email templates into editable JSON. Whether you're a developer, SaaS product team, or onboarding specialist, this video breaks down how to transform raw HTML emails into Beefree compatible designs — without the need to rebuild them from scratch. Learn how to enable the HTML Importer, set up the API, structure your HTML correctly, authenticate your requests, and embed this tool into your own application.

Chapters:

• 0:00 - Intro

• 0:50 - Real-world use cases for the HTML Importer API

• 1:51 - What the HTML Importer actually does

• 2:47 - How to enable the HTML Importer in the SDK Developer Console

• 3:56 - Authenticating and making your first API call

• 5:27 - Preparing your HTML for conversion (doctypes, tags, structure).

• 7:32 - Embedding HTML Importer in your workflow

• 8:03 - Live demo: HTML to JSON conversion

• 8:56 - Key takeaways

Transcript

The following text includes the complete transcript for this video.

1
00:00:02,880 --> 00:00:08,320
What if transforming HTML email templates 
into editable Beefree content only took

2
00:00:08,320 --> 00:00:13,920
seconds? From conversations with our customers, 
we’ve heard it can take up to two hours just to

3
00:00:13,920 --> 00:00:19,600
rebuild a single email starting from 
raw HTML. With the new HTML Importer,

4
00:00:19,600 --> 00:00:25,200
you can programmatically turn existing 
email HTML into Beefree JSON with a single

5
00:00:25,200 --> 00:00:31,840
API call—transforming your templates into 
fully editable content in seconds, not hours.

6
00:00:31,840 --> 00:00:35,600
This video will guide you through 
the HTML Importer and how it works,

7
00:00:35,600 --> 00:00:40,640
in five easy-to-follow sections. 
We’ll cover real-world use cases,

8
00:00:40,640 --> 00:00:44,640
how it works, how to use it, 
embedding it into your workflow,

9
00:00:44,640 --> 00:00:50,960
and we’ll walk through a full HTML template 
example and the JSON returned from the API.

10
00:00:50,960 --> 00:00:57,440
To kick things off, let’s look at some real-world 
use cases for the HTML Importer. Slow, cumbersome

11
00:00:57,440 --> 00:01:02,960
migration processes? They’re a thing of the past. 
If you're new to the Beefree SDK, you can migrate

12
00:01:02,960 --> 00:01:08,800
all your legacy templates without asking your 
customers to manually recreate every single one.

13
00:01:08,800 --> 00:01:13,280
Do you regularly onboard new users who’d 
love to keep using the templates they

14
00:01:13,280 --> 00:01:17,520
already have? The HTML Importer lets 
them import their designs and gives

15
00:01:17,520 --> 00:01:21,920
them instant editing power—without 
the usual migration headaches.

16
00:01:21,920 --> 00:01:26,320
Or maybe you have a professional services 
team that helps new users migrate their

17
00:01:26,320 --> 00:01:32,160
templates. With the Importer API, that job 
just got a whole lot easier and faster.

18
00:01:32,160 --> 00:01:37,360
No matter how you plan to use the HTML 
Importer, it will dramatically streamline

19
00:01:37,360 --> 00:01:41,600
your processes. This isn’t just about 
saving time—it’s about empowering your

20
00:01:41,600 --> 00:01:46,000
users to finally embrace modern email 
builders without the heavy lifting,

21
00:01:46,000 --> 00:01:52,000
unlocking faster onboarding, happier customers, 
and a smoother workflow for everyone.

22
00:01:52,000 --> 00:01:56,640
Now let’s quickly talk about what 
the HTML Importer API actually does.

23
00:01:56,640 --> 00:02:03,120
It takes static HTML emails and transforms 
them into Beefree SDK’s native JSON format,

24
00:02:03,120 --> 00:02:07,200
ready to load in the builder for quick 
editing. This is great for teams looking

25
00:02:07,200 --> 00:02:12,160
to migrate existing templates or 
upload HTML templates to edit.

26
00:02:12,160 --> 00:02:16,880
Now let’s talk about how to use it—but 
before we do, one quick note: The email

27
00:02:16,880 --> 00:02:22,160
example we’ll be showing in this video comes from 
reallygoodemails.com and is used strictly for

28
00:02:22,160 --> 00:02:29,040
demonstration purposes. This example is intended 
to show how the HTML Importer API works and should

29
00:02:29,040 --> 00:02:34,960
not be seen as an endorsement or encouragement 
to copy or reuse another brand’s content.

30
00:02:34,960 --> 00:02:39,360
So, we kindly ask that you use 
any email inspiration responsibly.

31
00:02:39,360 --> 00:02:44,320
Okay—when you’re ready to transform your 
HTML email templates into editable designs

32
00:02:44,320 --> 00:02:47,760
inside the Beefree builder, here’s how to do it.

33
00:02:47,760 --> 00:02:51,280
Step one: Enable the HTML Importer API

34
00:02:51,280 --> 00:02:57,440
Before anything else, you need to enable the 
HTML Importer API for your SDK application.

35
00:02:59,440 --> 00:03:03,440
Make sure you’re logged into the 
Beefree SDK developer console. Next,

36
00:03:03,440 --> 00:03:10,080
select your application—in this example, 
our email builder. Click on “Details.”

37
00:03:11,040 --> 00:03:18,880
Now, scroll down to the section labeled HTML 
Importer API, then click “Enable the service

38
00:03:18,880 --> 00:03:27,520
and generate an API key.” You’ll see a 
popup confirming that additional fees

39
00:03:27,520 --> 00:03:33,520
may apply when using this feature. Click 
“Save,” and your API key is now available.

40
00:03:33,520 --> 00:03:37,680
This key is required for authentication, 
so be sure to keep it safe.

41
00:03:37,680 --> 00:03:39,360
It’s also worth noting that you can set

42
00:03:39,360 --> 00:03:44,320
up the HTML Importer with a free 
account—no paid plan is needed.

43
00:03:52,640 --> 00:03:56,800
Step two: Copy HTML and authenticate your API key

44
00:03:56,800 --> 00:04:01,920
Now we’ll jump into the Beefree SDK docs, 
where you’ll find details about how the

45
00:04:01,920 --> 00:04:07,040
API works—and where you can test 
it in our interactive playground.

46
00:04:07,600 --> 00:04:17,040
First, navigate to the API section, click 
on HTML Importer API, and then Import HTML.

47
00:04:17,040 --> 00:04:34,080
Scroll down to see the prerequisites—which 
we’ll talk about more in a second—and the

48
00:04:34,080 --> 00:04:35,920
API call setup (for example, making sure 
your method is POST). At the very bottom,

49
00:04:35,920 --> 00:04:40,400
you’ll find the testing 
environment. Click “Test it.”

50
00:04:41,040 --> 00:04:48,560
A window will pop up. You can expand it using 
the top-right button. You'll see information

51
00:04:48,560 --> 00:04:55,120
pre-populated here, including the URL 
and a placeholder for the collection,

52
00:04:55,120 --> 00:04:58,000
which we’ll later set to conversion.

53
00:04:58,640 --> 00:05:03,280
Before authenticating our API 
key, let’s first grab the HTML.

54
00:05:03,920 --> 00:05:09,920
Head to reallygoodemails.com. I’ve 
pre-selected an email that celebrates

55
00:05:09,920 --> 00:05:14,720
how awesome dogs are—and I love the 
layout, so I want to repurpose it.

56
00:05:19,040 --> 00:05:23,760
Copy the HTML. Head back to the playground,

57
00:05:23,760 --> 00:05:29,440
scroll down to the “body” section, 
click “Other,” and paste in the HTML.

58
00:05:31,040 --> 00:05:35,040
Step three: Structure your HTML before sending

59
00:05:35,040 --> 00:05:41,280
Correct formatting is critical for successful 
conversion. If your HTML is missing key elements

60
00:05:41,280 --> 00:05:46,000
or doesn’t follow standard structure, 
we can’t properly convert the design.

61
00:05:46,000 --> 00:05:50,320
To prepare your HTML for smooth 
conversion, make sure it includes:

62
00:05:50,320 --> 00:05:52,620
A DOCTYPE declaration

63
00:05:52,620 --> 00:05:54,960
Opening and closing html and body tags

64
00:05:54,960 --> 00:05:59,440
A meta charset="UTF-8" tag in the <head>

65
00:05:59,440 --> 00:06:05,200
Remove anything unexpected—like merge tags or 
scripts—especially if they’re outside the body or

66
00:06:05,200 --> 00:06:10,800
at the end of the file. Poor structure can cause 
the conversion to fail or generate corrupted JSON.

67
00:06:11,360 --> 00:06:15,520
Clean, well-structured HTML = best results.

68
00:06:15,520 --> 00:06:20,240
Now that our HTML is ready, we can 
complete the authentication step.

69
00:06:20,240 --> 00:06:22,960
Head back to the Beefree SDK developer console,

70
00:06:22,960 --> 00:06:28,852
copy your API key, and paste it into the 
authentication section as a Bearer Token.

71
00:06:28,852 --> 00:06:31,040
Make sure you select Bearer Token 
as the authentication method—this is

72
00:06:35,296 --> 00:06:41,600
required for Beefree SDK’s API calls.

73
00:06:42,720 --> 00:06:46,480
Step four: Import HTML via the API

74
00:06:47,680 --> 00:06:49,600
We need to input a few key 
values before converting

75
00:06:49,600 --> 00:06:52,880
our static HTML into Beefree’s editable JSON.

76
00:06:53,760 --> 00:06:58,960
We’ve already pasted our HTML 
and added our API key. Now:

77
00:06:59,840 --> 00:07:03,280
Set collection to conversion

78
00:07:03,280 --> 00:07:07,920
Set Content-Type to text/html

79
00:07:11,440 --> 00:07:13,040
Click “Send.” If everything’s set 
up correctly, you should receive

80
00:07:13,040 --> 00:07:16,560
a 200 response, confirming a successful call.

81
00:07:20,320 --> 00:07:24,320
On the right, you’ll see the JSON. This is Beefree

82
00:07:24,320 --> 00:07:32,160
SDK’s proprietary format—what gets 
loaded into the builder for editing.

83
00:07:32,160 --> 00:07:35,040
Step five: Embed in your workflow

84
00:07:35,040 --> 00:07:41,760
You can use this API however it fits your 
team’s workflow. One common use case:

85
00:07:41,760 --> 00:07:48,960
adding an Import HTML button to your app that 
lets users upload their HTML with a single click.

86
00:07:50,000 --> 00:08:00,960
We’ve made that easy—sample code is available 
in our docs and linked in the video description.

87
00:08:00,960 --> 00:08:03,440
Let’s try it out together.

88
00:08:03,440 --> 00:08:16,800
Using our demo environment, we’ll copy 
the same HTML from reallygoodemails.com,

89
00:08:16,800 --> 00:08:27,440
paste it into the Import 
HTML modal, and click Import.

90
00:08:27,440 --> 00:08:35,120
Give it a second—and just like that, the email 
is now loaded in the Beefree SDK builder.

91
00:08:37,200 --> 00:08:41,520
You’ll notice how all the 
elements—images, buttons,

92
00:08:41,520 --> 00:08:45,440
and layout—are now editable Beefree blocks.

93
00:08:46,320 --> 00:08:48,880
Once you load that JSON into the editor,

94
00:08:48,880 --> 00:08:56,800
most of the heavy lifting is done. Users 
can tweak the design or polish it as needed.

95
00:08:56,800 --> 00:09:02,400
Think of it as 95% done, with full 
control to customize the rest.

96
00:09:02,400 --> 00:09:04,640
Let’s wrap with a quick summary:

97
00:09:05,280 --> 00:09:10,400
The HTML Importer converts static 
HTML into Beefree JSON via API

98
00:09:10,400 --> 00:09:12,240
It requires well-formatted HTML

99
00:09:13,440 --> 00:09:18,800
Use POST + text/html + 
authentication via Bearer Token

100
00:09:18,800 --> 00:09:21,280
Response is ready-to-edit JSON

101
00:09:21,280 --> 00:09:23,760
Final edits can be made in the builder

102
00:09:23,760 --> 00:09:27,120
Choose this if you want to cut 
down on manual rebuilding and

103
00:09:27,120 --> 00:09:31,120
support smart migrations or quick HTML uploads.

104
00:09:31,120 --> 00:09:31,840
That’s a wrap.

105
00:09:31,840 --> 00:09:38,240
The HTML Importer makes it easier than ever to 
bring HTML templates into Beefree SDK. It’s fast,

106
00:09:38,240 --> 00:09:41,120
flexible, and saves time for both 
internal teams and end users.

107
00:09:46,480 --> 00:09:51,280
No need to rebuild templates from 
scratch—just import and edit.

108
00:09:55,760 --> 00:09:59,920
For more information on pricing, 
implementation, and getting started,

109
00:09:59,920 --> 00:10:04,080
check out the developer docs 
linked in the description.

110
00:10:04,080 --> 00:10:07,520
Thanks for watching.