Getting started

This article explains how to attach a command to a link or a button. It is the main approach: it covers most tasks and requires no programming.

Where to insert HTML

Commands work in any field where you enter HTML:

• a block on the home screen;
• HTML inserts on the product card, before and after the picture, the description and the buy button;
• a button in a story;
• the text of a post or news item;
• a static page.

If the editor shows the text "as in the app" (visual mode), switch to HTML / source mode: otherwise the editor may strip non-standard tags and attributes.

The data-mobius attribute

To make an element do something on tap, add a data-mobius attribute with a command word:

<a data-mobius="navigation.goBack">Back</a>

It works on any tappable element, most often a link <a> or a button <button>.

Passing data to a command

Most commands need data: which product to open, how many to add. There are three ways to pass it; pick whichever suits you.

Way 1. Inline in the command, in brackets

<a data-mobius="catalog.openProduct('15')">Open the product</a>
<a data-mobius="catalog.openSection('320', 'New in')">New in</a>

Write the values in quotes, separated by commas, in the order given in the command reference.

Way 2. As separate data- attributes

The same thing, but each value in its own attribute. The attribute name is data- plus the parameter name:

<button data-mobius="basket.add" data-id="15" data-qty="2">
    Add 2 to the basket
</button>

Way 3. The data-params attribute, for complex data

If there is a lot of data or it is nested, pass it in a single data-params attribute as JSON:

<a data-mobius="catalog.openSectionFiltered"
   data-params='{"id":"320","title":"Sale","filter":{"sale":"Y"}}'>
    Discounted products
</a>

Note that data-params uses double quotes inside, while the attribute itself is wrapped in single quotes.

Links through mobius://

If you would rather work with ordinary links, use an address starting with mobius://:

<a href="mobius://catalog.openHome">Go to the catalogue</a>

It is fully equivalent to data-mobius. Handy when the editor only lets you change the link address and not add arbitrary attributes.

Styling: the block already looks like the app

Inserted text automatically inherits the app font, base size and text colour; nothing needs configuring. If you want to change the styling of a button or a block, add ordinary CSS:

<a data-mobius="catalog.openHome"
   style="display:inline-block;padding:12px 20px;border-radius:10px;
          background:#1D8673;color:#fff;text-decoration:none;text-align:center;">
    Go to the catalogue
</a>

A short checklist

1. Insert the HTML in source mode.
2. Add a data-mobius attribute with the command to a link or a button.
3. Pass the data in one of the three ways.
4. Save and check it on the demo environment.

What next

• Command reference: the full list of what can be called.
• Examples: ready blocks to copy and adapt.
• Programmatic access: for advanced scenarios with feedback from the app.