Tracking Message Changes

This feature is available on Beefree SDK paid plans only.

Overview

We added a new function to track message changes in the builder. This powerful new feature answers two important questions:

How can I monitor what my customers do in the builder?
How can I tell when a message has actually been updated?

When onChange is enabled and your customers edit their message – the callback provides you valuable information on the new content or section, the kind of action that was performed on existing content, and the JSON update (as the entire page, as well as JSON patches).

onChange is also the foundation on which the Undo, Redo & Edit History feature was built on.

Use cases

Usage tracking

In today’s software, knowing how customers use an application is essential if you want to provide a good user experience (UX) and eliminate friction points. It’s also a valuable resource to understand where to invest future development effort and build something that customers love.

onChange tracking gives you – the host application – the opportunity to get this information when your customers are creating designs in the builder.

You can use the onChange callback to:

Understand if your customers are actively working on the message they opened (or if instead they temporarily abandoned that task to work on something else).
Discover if they are using one of the great new features that your team recently enabled.
Dismiss or confirm a bug by reproducing a customer’s steps.

Autosave

So you might be asking: “Isn’t this similar to the existing Autosave feature?” The simple answer is “No!”.

The Autosave function is triggered at regular intervals, whether anything has even changed since the last Autosave event or not, which could result in the user seeing a ‘recovery dialog’ window even if there weren’t any changes between the previously saved message and the most recent automatically saved one.

Now you can invoke the Autosave event only when something has been added or updated, resulting in a better message recovery experience.

History

Why is having a historical log of message changes so important? As with the previous cases, this will allow you to provide a better overall user experience. Creating a good email message or campaign typically involves input from several people or departments before it’s finally ready to send, but that can lead to inadvertent mistakes that might cause hours of work to be lost. Saving the differences between versions of a message created during the email production workflow – and allowing your users to compare & restore them – could be a huge time-saver in those cases.

Content check

When one of your users adds or updates text or images, the onChange callback returns the new input to your application, allowing you to trigger a complementary function based on it.

The use cases change from application-to-application, but the feature is flexible enough to accommodate a wide variety of scenarios. Here are just a few:

Content suggestions
Prevent unwanted content
Link validation
Link reputation check
Custom HTML validation
Set up an alternative workflow when conditional syntax is applied
…

How it works

To enable changes tracking you need to add in beeConfig:

The configuration option
The onChange callback, with the related response function

Configuration

Enable "onChange" Event


trackChanges: true, // boolean

This parameter defines when the tracking is active in the builder.

onChange Event


onChange: function (jsonFile, response) { // do something with response... },

The onChange callback is triggered every time the builder tracks a change in the message. It returns the message JSON and a response JSON which contains all the information needed to handle any of the use cases described above.

Callback response schema


{
    "code": "01", // See content and action codes bellow
    "description": "string",
    "value": "string", // See the chart below
    "patches": {...} // JSON patch formatted object
}

Callback Parameters

Parameter	Type	Value
code	string	Unique identifier for the event created by combining the content code with the action code.
description	string	A text description of the event in the chosen language. (e.g. Image Block Padding Left: 5px)
value	string	If available, this is the new value. (e.g. If padding changes to 5px, then the value returned is “5px”)
patches	array	An array of patches in the JSON Patch specification. JSON Patch is specified in RFC 6902 from the IETF.

Parameter

Type

Value

code

string

Unique identifier for the event created by combining the content code with the action code.

description

string

A text description of the event in the chosen language. (e.g. Image Block Padding Left: 5px)

value

string

If available, this is the new value. (e.g. If padding changes to 5px, then the value returned is “5px”)

patches

array

An array of patches in the JSON Patch specification. JSON Patch is specified in RFC 6902 from the IETF.

Content Codes

Code	Content
01	Text Block
02	Image Block
03	Button Block
04	Divider Block
05	Social Block
06	Dynamic Content Block
07	HTML Block
08	Video Block
09	Form
10	Icons
11	Menu
14	Row
16	Message
18	Spacer
22	Paragraph
23	List
26	Table

Common Actions

Code	Action
00	Dropped
01	Dragged
02	Deleted
03	Duplicated
04	Changed
05	Opened
06	Closed
07	Locked
08	Saved
09	Restored
10	Content area background color
11	Do not stack on mobile
12	Row background image
13	Background Center
14	Background Repeat
15	Background Full width
16	Row Display condition
17	Reverse stack order on mobile
20	Text color
21	Link color
23	Text edited
24	Line height
25	Content area width
27	Background color
28	Default font
30	Padding All sides
31	Padding Left
32	Padding Right
33	Padding Top
34	Padding Bottom
40	Hide on mobile
41	Video url
42	Play icon type
43	Play icon color
44	Play icon size
50	Align
51	Automatic image resizing
52	Full width on mobile
53	Image width
60	Alternate text
61	Dynamic image src
62	Dynamic image toggle
63	Change image
64	Image link
70	Button Align
71	Button Link type
72	Button width
73	Button Auto width
74	Button Background color
75	Border radius
80	HTML edited
81	Border All sides
82	Border Left
83	Border Right
84	Border Top
85	Border Bottom
90	Divider Line toggle
91	Divider Width
92	Divider Height
93	Divider Align
95	Icon Name
96	Icon Alternate text
97	Icon Url
98	Icon spacing
99	Icon Align
128	Background Video
129	Paragraph Spacing
130	Font Weight
131	List Type
132	Start List
133	List Spacing
134	List Indent
135	List Style Position

Complete Event Chart

Code	Description	Type	Value
0100	Text dropped	module
0101	Text dragged	module
0102	Text deleted	module
0103	Text duplicated	module
0120	Text color {{value}}	string	Hex color code (e.g. #FFFFFF)
0121	Link color {{value}}	string	Hex color code (e.g. #FFFFFF)
0123	Text edited	string	HTML
0124	Line height {{value}}	string	Value as percent (e.g. 150%)
0130	Padding Add sides {{value}}	string	Value in pixels (e.g. 25px)
0131	Padding Left {{value}}	string	Value in pixels (e.g. 25px)
0132	Padding Right {{value}}	string	Value in pixels (e.g. 25px)
0133	Padding Top {{value}}	string	Value in pixels (e.g. 25px)
0134	Padding Bottom {{value}}	string	Value in pixels (e.g. 25px)
0140	Hide on mobile	boolean	true \| false
0200	Image dropped	module
0201	Image dragged	module
0202	Image deleted	module
0203	Image duplicated	module
0230	Padding Add sides {{value}}	string	Value in pixels (e.g. 25px)
0231	Padding Left {{value}}	string	Value in pixels (e.g. 25px)
0232	Padding Right {{value}}	string	Value in pixels (e.g. 25px)
0233	Padding Top {{value}}	string	Value in pixels (e.g. 25px)
0234	Padding Bottom {{value}}	string	Value in pixels (e.g. 25px)
0240	Hide on mobile	boolean	true \| false
0250	Align {{value}}	string	left \| right \| center
0251	Automatic image resizing	boolean	true \| false
0252	Full width on mobile	boolean	true \| false
0253	Image width {{value}}	string	%
0260	Alternate Text	string	text value
0261	Dynamic image	string	Image path
0262	Dynamic image toggle	boolean	false (only triggered when disabled)
0263	Change image	string	Image path
0264	Image link	string	Url
0300	Button dropped	module
0301	Button dragged	module
0302	Button deleted	module
0303	Button duplicated	module
0320	Text color {{value}}	string	Hex color code (e.g. #FFFFFF)
0324	Line height {{value}}	string	Value as percent (e.g. 150%)
0330	Padding Add sides {{value}}	string	Value in pixels (e.g. 25px)
0331	Padding Left {{value}}	string	Value in pixels (e.g. 25px)
0332	Padding Right {{value}}	string	Value in pixels (e.g. 25px)
0333	Padding Top {{value}}	string	Value in pixels (e.g. 25px)
0334	Padding Bottom {{value}}	string	Value in pixels (e.g. 25px)
0340	Hide on mobile	boolean	true \| false
0370	Align {{value}}	string	left \| right \| center
0371	Link type {{value}}	string	Url
0372	Button width {{value}}	string	%
0373	Auto width	boolean	true \| false
0374	Background color {{value}}	string	Hex Color Code (e.g. #FFFFFF)
0375	Border radius	string	Value in pixels (e.g. 5px)
0381	Border Add sides {{value}}	string	Value in pixels \| Border Style \| Hex color (e.g. 1px solid #C7702E)
0382	Border Left {{value}}	string	Value in pixels \| Border Style \| Hex color 1px solid #C7702E
0383	Border Right {{value}}	string	Value in pixels \| Border Style \| Hex color 1px solid #C7702E
0384	Border Top {{value}}	string	Value in pixels \| Border Style \| Hex color 1px solid #C7702E
0385	Border Bottom {{value}}	string	Value in pixels \| Border Style \| Hex color 1px solid #C7702E
0400	Divider dropped	module
0401	Divider dragged	module
0402	Divider deleted	module
0403	Divider duplicated	module
0430	Padding Add sides {{value}}	string	Value in pixels (e.g. 25px)
0431	Padding Left {{value}}	string	Value in pixels (e.g. 25px)
0432	Padding Right {{value}}	string	Value in pixels (e.g. 25px)
0433	Padding Top {{value}}	string	Value in pixels (e.g. 25px)
0434	Padding Bottom {{value}}	string	Value in pixels (e.g. 25px)
0440	Hide on mobile	boolean	true \| false
0490	Line	string	Value in pixels \| Border Style \| Hex color 1px solid #C7702E
0491	Width {{value}}	string	Value as percent (e.g. 150%)
0492	Height {{value}}	string	Value in pixels (e.g. 25px)
0493	Align {{value}}	string	left \| right \| center
0500	Social dropped	module
0501	Social dragged	module
0502	Social deleted	module
0503	Social duplicated	module
0530	Padding Add sides {{value}}	string	Value in pixels (e.g. 25px)
0531	Padding Left {{value}}	string	Value in pixels (e.g. 25px)
0532	Padding Right {{value}}	string	Value in pixels (e.g. 25px)
0533	Padding Top {{value}}	string	Value in pixels (e.g. 25px)
0534	Padding Bottom {{value}}	string	Value in pixels (e.g. 25px)
0540	Hide on mobile	boolean	true \| false
0595	Name {{value}}	string	Icon Name
0596	Alternate Text {{value}}	string	Icon Alternate text
0597	Image Url	string	Icon Url
0598	Icon spacing {{value}}	string	Value in pixels (e.g. 0 0 5px 15px)
0599	Align {{value}}	string	left \| right \| center
0600	Dynamic content dropped	module
0601	Dynamic content dragged	module
0602	Dynamic content deleted	module
0603	Dynamic content duplicated	module
0604	Dynamic content changed	string	value
0640	Hide on mobile	boolean	true \| false
0700	HTML dropped	module
0701	HTML dragged	module
0702	HTML deleted	module
0703	HTML duplicated	module
0740	Hide on mobile	boolean	true \| false
0780	HTML edited	string	HTML
0800	Video dropped	module
0801	Video dragged	module
0802	Video deleted	module
0803	Video duplicated	module
0830	Padding Add sides {{value}}	string	Value in pixels (e.g. 25px)
0831	Padding Left {{value}}	string	Value in pixels (e.g. 25px)
0832	Padding Right {{value}}	string	Value in pixels (e.g. 25px)
0833	Padding Top {{value}}	string	Value in pixels (e.g. 25px)
0834	Padding Bottom {{value}}	string	Value in pixels (e.g. 25px)
0840	Hide on mobile	boolean	true \| false
0841	Video url	string	Video Url
0842	Play icon type {{value}}	string	Play icon type (e.g. Round outline)
0843	Play icon color {{value}}	string	light \| dark
0844	Play icon size {{value}}	string	Value in pixels (e.g. 25px)
1400	Row dropped	row
1401	Row dragged	row
1402	Row deleted	row
1403	Row duplicated	row
1410	Content background color {{value}}	string	Hex Color Code (e.g. #FFFFFF)
1411	Do not stack on mobile	boolean	true \| false
1412	Row background image	string	Image path
1413	Center	boolean	true \| false
1414	Repeat	boolean	true \| false
1415	Full width	boolean	true \| false
1416	Display Condition	object	Display condition object
1417	Reverse stack order on mobile	boolean	true \| false
1430	Padding Add sides {{value}}	string	Value in pixels (e.g. 25px)
1431	Padding Left {{value}}	string	Value in pixels (e.g. 25px)
1432	Padding Right {{value}}	string	Value in pixels (e.g. 25px)
1433	Padding Top {{value}}	string	Value in pixels (e.g. 25px)
1434	Padding Bottom {{value}}	string	Value in pixels (e.g. 25px)
1474	Background color {{value}}	string	Hex Color Code (e.g. #FFFFFF)
1481	Border Add sides {{value}}	string	Value in pixels \| Border Style \| Hex color 1px solid #C7702E
1482	Border Left {{value}}	string	Value in pixels \| Border Style \| Hex color 1px solid #C7702E
1483	Border Right {{value}}	string	Value in pixels \| Border Style \| Hex color 1px solid #C7702E
1484	Border Top {{value}}	string	Value in pixels \| Border Style \| Hex color 1px solid #C7702E
1485	Border Bottom {{value}}	string	Value in pixels \| Border Style \| Hex color 1px solid #C7702E
1625	Content area width {{value}}	string	Value in pixels (e.g. 25px)
1626	Background color {{value}}	string	Hex Color Code (e.g. #FFFFFF)
1627	Content area background color: {{value}}	string	Hex Color Code (e.g. #FFFFFF)
1628	Default font	string	Font
1529	Link color {{value}}	string	Hex Color Code (e.g. #FFFFFF)
1605	Message opened	page	JSON template
1609	Message restored (e.g. undo or redo history)	page	JSON template
13130	Button Font Weight	string
14128	Row Background Video	string	Video URL
22130	Paragraph Font Weight	string	Font Weight value

Code

Description

Type

Value

0100

Text dropped

module

0101

Text dragged

module

0102

Text deleted

module

0103

Text duplicated

module

0120

Text color {{value}}

string

Hex color code (e.g. #FFFFFF)

0121

Link color {{value}}

string

Hex color code (e.g. #FFFFFF)

0123

Text edited

string

HTML

0124

Line height {{value}}

string

Value as percent (e.g. 150%)

0130

Padding Add sides {{value}}

string

Value in pixels (e.g. 25px)

0131

Padding Left {{value}}

string

Value in pixels (e.g. 25px)

0132

Padding Right {{value}}

string

Value in pixels (e.g. 25px)

0133

Padding Top {{value}}

string

Value in pixels (e.g. 25px)

0134

Padding Bottom {{value}}

string

Value in pixels (e.g. 25px)

0140

Hide on mobile

boolean

true | false

0200

Image dropped

module

0201

Image dragged

module

0202

Image deleted

module

0203

Image duplicated

module

0230

Padding Add sides {{value}}

string

Value in pixels (e.g. 25px)

0231

Padding Left {{value}}

string

Value in pixels (e.g. 25px)

0232

Padding Right {{value}}

string

Value in pixels (e.g. 25px)

0233

Padding Top {{value}}

string

Value in pixels (e.g. 25px)

0234

Padding Bottom {{value}}

string

Value in pixels (e.g. 25px)

0240

Hide on mobile

boolean

true | false

0250

Align {{value}}

string

left | right | center

0251

Automatic image resizing

boolean

true | false

0252

Full width on mobile

boolean

true | false

0253

Image width {{value}}

string

0260

Alternate Text

string

text value

0261

Dynamic image

string

Image path

0262

Dynamic image toggle

boolean

false (only triggered when disabled)

0263

Change image

string

Image path

0264

Image link

string

Url

0300

Button dropped

module

0301

Button dragged

module

0302

Button deleted

module

0303

Button duplicated

module

0320

Text color {{value}}

string

Hex color code (e.g. #FFFFFF)

0324

Line height {{value}}

string

Value as percent (e.g. 150%)

0330

Padding Add sides {{value}}

string

Value in pixels (e.g. 25px)

0331

Padding Left {{value}}

string

Value in pixels (e.g. 25px)

0332

Padding Right {{value}}

string

Value in pixels (e.g. 25px)

0333

Padding Top {{value}}

string

Value in pixels (e.g. 25px)

0334

Padding Bottom {{value}}

string

Value in pixels (e.g. 25px)

0340

Hide on mobile

boolean

true | false

0370

Align {{value}}

string

left | right | center

0371

Link type {{value}}

string

Url

0372

Button width {{value}}

string

0373

Auto width

boolean

true | false

0374

Background color {{value}}

string

Hex Color Code (e.g. #FFFFFF)

0375

Border radius

string

Value in pixels (e.g. 5px)

0381

Border Add sides {{value}}

string

Value in pixels | Border Style | Hex color (e.g. 1px solid #C7702E)

0382

Border Left {{value}}

string

Value in pixels | Border Style | Hex color 1px solid #C7702E

0383

Border Right {{value}}

string

Value in pixels | Border Style | Hex color 1px solid #C7702E

0384

Border Top {{value}}

string

Value in pixels | Border Style | Hex color 1px solid #C7702E

0385

Border Bottom {{value}}

string

Value in pixels | Border Style | Hex color 1px solid #C7702E

0400

Divider dropped

module

0401

Divider dragged

module

0402

Divider deleted

module

0403

Divider duplicated

module

0430

Padding Add sides {{value}}

string

Value in pixels (e.g. 25px)

0431

Padding Left {{value}}

string

Value in pixels (e.g. 25px)

0432

Padding Right {{value}}

string

Value in pixels (e.g. 25px)

0433

Padding Top {{value}}

string

Value in pixels (e.g. 25px)

0434

Padding Bottom {{value}}

string

Value in pixels (e.g. 25px)

0440

Hide on mobile

boolean

true | false

0490

Line

string

Value in pixels | Border Style | Hex color 1px solid #C7702E

0491

Width {{value}}

string

Value as percent (e.g. 150%)

0492

Height {{value}}

string

Value in pixels (e.g. 25px)

0493

Align {{value}}

string

left | right | center

0500

Social dropped

module

0501

Social dragged

module

0502

Social deleted

module

0503

Social duplicated

module

0530

Padding Add sides {{value}}

string

Value in pixels (e.g. 25px)

0531

Padding Left {{value}}

string

Value in pixels (e.g. 25px)

0532

Padding Right {{value}}

string

Value in pixels (e.g. 25px)

0533

Padding Top {{value}}

string

Value in pixels (e.g. 25px)

0534

Padding Bottom {{value}}

string

Value in pixels (e.g. 25px)

0540

Hide on mobile

boolean

true | false

0595

Name {{value}}

string

Icon Name

0596

Alternate Text {{value}}

string

Icon Alternate text

0597

Image Url

string

Icon Url

0598

Icon spacing {{value}}

string

Value in pixels (e.g. 0 0 5px 15px)

0599

Align {{value}}

string

left | right | center

0600

Dynamic content dropped

module

0601

Dynamic content dragged

module

0602

Dynamic content deleted

module

0603

Dynamic content duplicated

module

0604

Dynamic content changed

string

value

0640

Hide on mobile

boolean

true | false

0700

HTML dropped

module

0701

HTML dragged

module

0702

HTML deleted

module

0703

HTML duplicated

module

0740

Hide on mobile

boolean

true | false

0780

HTML edited

string

HTML

0800

Video dropped

module

0801

Video dragged

module

0802

Video deleted

module

0803

Video duplicated

module

0830

Padding Add sides {{value}}

string

Value in pixels (e.g. 25px)

0831

Padding Left {{value}}

string

Value in pixels (e.g. 25px)

0832

Padding Right {{value}}

string

Value in pixels (e.g. 25px)

0833

Padding Top {{value}}

string

Value in pixels (e.g. 25px)

0834

Padding Bottom {{value}}

string

Value in pixels (e.g. 25px)

0840

Hide on mobile

boolean

true | false

0841

Video url

string

Video Url

0842

Play icon type {{value}}

string

Play icon type (e.g. Round outline)

0843

Play icon color {{value}}

string

light | dark

0844

Play icon size {{value}}

string

Value in pixels (e.g. 25px)

1400

Row dropped

row

1401

Row dragged

row

1402

Row deleted

row

1403

Row duplicated

row

1410

Content background color {{value}}

string

Hex Color Code (e.g. #FFFFFF)

1411

Do not stack on mobile

boolean

true | false

1412

Row background image

string

Image path

1413

Center

boolean

true | false

1414

Repeat

boolean

true | false

1415

Full width

boolean

true | false

1416

Display Condition

object

Display condition object

1417

Reverse stack order on mobile

boolean

true | false

1430

Padding Add sides {{value}}

string

Value in pixels (e.g. 25px)

1431

Padding Left {{value}}

string

Value in pixels (e.g. 25px)

1432

Padding Right {{value}}

string

Value in pixels (e.g. 25px)

1433

Padding Top {{value}}

string

Value in pixels (e.g. 25px)

1434

Padding Bottom {{value}}

string

Value in pixels (e.g. 25px)

1474

Background color {{value}}

string

Hex Color Code (e.g. #FFFFFF)

1481

Border Add sides {{value}}

string

Value in pixels | Border Style | Hex color 1px solid #C7702E

1482

Border Left {{value}}

string

Value in pixels | Border Style | Hex color 1px solid #C7702E

1483

Border Right {{value}}

string

Value in pixels | Border Style | Hex color 1px solid #C7702E

1484

Border Top {{value}}

string

Value in pixels | Border Style | Hex color 1px solid #C7702E

1485

Border Bottom {{value}}

string

Value in pixels | Border Style | Hex color 1px solid #C7702E

1625

Content area width {{value}}

string

Value in pixels (e.g. 25px)

1626

Background color {{value}}

string

Hex Color Code (e.g. #FFFFFF)

1627

Content area background color: {{value}}

string

Hex Color Code (e.g. #FFFFFF)

1628

Default font

string

Font

1529

Link color {{value}}

string

Hex Color Code (e.g. #FFFFFF)

1605

Message opened

page

JSON template

1609

Message restored (e.g. undo or redo history)

page

JSON template

13130

Button Font Weight

string

14128

Row Background Video

string

Video URL

22130

Paragraph Font Weight

string

Font Weight value

PreviousManage Subscriptions NextSample Code

Last updated 6 months ago