Introduction
In this tutorial, you will learn how to create your own custom component. A custom component is a component that is not provided by Mobi Builder but can be created using HTML. These are sort of like 'plugins'. You will also learn how to publish your custom components to the Mobi Builder plugin store. This tutorial assumes that you know some HTML, CSS and JavaScript.
Create a custom component
Custom components can be made by using HTML, css and JavaScript. To create your own component, navigate to the following link:
https://mobi-builder.web.app/plugins/developer/
Start off the process by providing the plugin title, your name, and a description of the plugin. Click 'Next' and then you will be asked to provide the code for your plugin. You can see some plugin code examples below:
Note
For each HTML child in your plugin, you must include the mb-component tag. You can see examples below with this tag included.
A) Simple hello world component
<p mb-component>Hello World</p>
Hello World
B) Styling a component
<p mb-component style="background-color: black; color: white;">Hello World</p>
Hello World
After creating the code for your custom component, click the 'Next' button. You will now be asked to enter in properties for your plugin. Properties are things that the user can change. Users will be able to change all CSS properties but you can add some common properties which users won't have to search for. If your plugin code has multiple HTML components (eg. two buttons), the user can click on one button and then change the properties for this button and then click on the other and do the same. Therefore, properties are per each HTML component. HTML properties should use the prefix html- and css properties should use the prefix css-. Properties should be separated by a comma. You can see an example below:
html-width, html-innerHTML, css-float
The final step is too click 'Next' and decide whether you want to publish your plugin to the Mobi Builder plugin store. Click 'Yes' if you wish to publish your plugin or 'No' if you don't want to. If you choose to publish your plugin, you will be taken to the page on the Mobi Builder plugin store where your plugin can be downloaded. If you choose not too, a plugin file will download. To learn how to use this plugin file in Mobi Builder, read the plugins documentation.