We simplified a process that used to take lines of code and reduced it to a few clicks.

Ambassador's visual editor was designed to speed up campaign launch time and allow marketing teams to instantly update campaigns and implement new ideas.

Editing a Refer-a-Friend widget

Marketers could now change the look and feel of their referral programs without having to toggle between an editor tool and the preview screen. From prompts and widgets to surveys and welcome messages, referral programs became conveniently customizable.

The Ambassador visual editor is a relatively complex product. In the coming months, I will be releasing detailed case studies covering the following aspects of the editor: code snippet installation and verification, adding and editing integrations, and the edit pane. In the meantime, you'll find a brief overview below.

Editor Landing Page

Our editor landing page consists of three elements - an integration list, a table to manage websites that have our code snippet installed, and a prompt that asks the user which website they would like to integrate with (or edit). Upon filling out said prompt, we check if the entered URL has our snippet installed; if not we throw an error and if all is well then the user is taken the requested URL, where they can add or edit integrations.

The editor landing page & snippet check

Edit Mode

Once on the desired page, the user still has access to the aforementioned integration list - here they can see integrations with any of the following combinations: “on this page”, “on different page”, “unpublished”, or “has errors”. At this point there are two options: edit one of the existing integrations in the list or add a new one by clicking the plus icon in the top right. Note: We deliberately designed this sidebar to the exact dimensions and style of our in app sidebar to mimic a familiar “ambassador” experience.

Editing the page Editing the page

Adding a New Integration

Upon clicking the plus icon to add a new integration, the user will be prompted with a series of questions depending on the integration type (Refer-a-friend widget, conversion, identify, welcome message, survey). Generally we’ll ask things that range from “What should we name this?” to “where should we place this”, or “what will trigger this”. Users feel like there is something personal about this layout. When we tested it, users enjoyed it, and said, "it felt like a conversation.”

Editing a Refer-a-Friend widget

Edit Pane

After completing our integration wizard, we display a summary - the user is free to edit anything that may not look right. Assuming everything did in fact go well, the user is then pushed into our edit pane where they can edit the style and messaging of their integration as they please.

The edit pane The edit pane
Published January 2017