The Widget editor

Learn how to use the widget editor

One of our core features are Widgets, we provide powerful and simple to build widgets that can be shown anywhere on the web.

Using our drag and drop editor, anyone can easily add and remove elements, re-order elements and add new columns as they please.

In this article we will explain the basics of the editor and how you can get started building your widgets.

Layout

Editor image

This is our widget editor. At first glance it seems somewhat easy to understand. Here we will explain each part and their purpose.

The sidebar

On the left you can see the sidebar, here is where you will be able to style, add content and modify options of your widget while you are adding elements.

From what you can see above, we have four sections.

  • Canvas style
  • Panels
  • Elements
  • Widget Data

Canvas style

This section is used to allow you to modify the size and appearance of the widget container (or canvas as its known). Here you can modify the width and height of the widget and here you can also manage the background of the widget.

Editor canvas image

Panels

Our widgets consist of multiple steps, we call these panels, when a user performs an action on a panel, they can either submit the widget or be brought to another panel.

We also use panels for split testing, this provides greater visibility to the editor and provides an understandable path of how different widgets relate to each other.

As of the 14th of December, split testing is coming soon.

Editor panels

Elements

Our widget panels are made up using our elements, an element can be anything from some text or an image all the way to being a scale of numbers or emojis.

Using our editor, you can drag and drop elements around the panels.

When you click on an element in the right side canvas, we will filter the sidebar to that element. This provides greater visibility and focus to you.

Editor element

Widget Data

The widget data section will show you what data the widget will submit, when you hover one of the rows, an element will be highlighted in the canvas to show you what element it is referring to.

Editor data

The sidebar element tabs

Sidebar tabs

In the sidebar when you have an element selected, you will notice three tabs, these are the different ways to customise your element.

Content tab

When the content tab is selected, you will be able to modify the content of the element, such as the text a user will see when they are interacting with your widget.

Options tab

The options tab will change the configuration of the element, such as show the image stretched in the parent element for example.

Style tab

The style tab is used to change the look and feel of the element, change the size, the colour or event the spacing around the element.

The canvas

On the right side of the editor you have what we we call, the canvas.

Here you can change the device viewport to either, Desktop, Tablet or Mobile. All Embedery widgets are responsive and are designed to work in any web browser.

To change the viewport, simply click on one of the icons.

Canvas viewports

The panels

In the canvas you can see all the panels of the widget, each one after another. If you hover the canvas you will notice a blue dashed border appear around different elements.

When you click on an element, you will focus in and be able to modify the style, options and content of that element.

If you click on "Edit panel", you will then be able to edit the panel by changing the background color, the border radius or the styling of the columns in the panel.

The publish button

We save your widget automatically when you apply changes, but for your widget to be updated to the world, you must press "Publish", this button is found in the bottom of the sidebar.

As soon as you press it, all traffic will see your latest changes.