To launch the editor mode, open a new tab in your browser and enter your application URL. When your application is loaded, click on the Edit button in the extension popup.
You should see the content selector:
The editor allows you to edit:
Select the item you want to edit or click on the New button and create it from scratch. We will be using a tour as an example in this article.
When you select or create something to edit, the editor will load the bottom panel. In our case, we created a new tour:
This panel holds:
For an empty tour, click on the Add first step button. If you already have steps, click on the plus button between the steps. The card/hint type selector will appear:
You can start from scratch by clicking on the top buttons. If you selected the Highlight element type or a Hint, the next step is to select a target element by clicking on it in your application.
We also prepared useful card templates for you.
Custom events have no visual representation, so when you're adding a new event, you will get into the target element selection mode directly.
In the bottom panel, you can:
When you click on the card name, the card and the item editor panel will appear:
The card is editable, put your content directly into the card. The left panel holds plenty of options you can adjust.
For example, you can change the backdrop of your card, you can adjust a position or size, or use any of the advanced settings like Advance when the element is not found and others.
The top toolbar has the following actions:
When you are done with your content changes, click on the green Save button in the bottom panel. If you want to publish or push changes to your end users, click on the Publish/Push changes button.
For more actions, switch to the Product Fruits administration.