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.

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