In this tutorial we show you how to add your own custom coded component into Dittofi in 7 quick and easy steps
In this article we will show you how to do this in 7 quick and easy steps.
Go to to the page builder and open up the Custom tab.
Next, give your component a name, in our example let's call it "Alert Button".
Next, you can give your component the category "Basic".
Note, you don't need to pick a library. This is to add a library like bootstrap.
You can add custom HTML and CSS to structure and style your custom component. To do this, you'll need to either type or copy and paste in your HTML as below.
In our example we enter the following block
// Example custom HTML
<div data-id="my-custom-id" class="red">
Note, Dittofi generates ids for each component so you can't write something like <div id="my-custom-id"></div> as we will overwrite it.
Enter your custom CSS in the same way. In our example we enter the following block.
// Example custom CSS
var item = document.querySelector('[data-id="my-custom-id"]');
item.addEventListener("click", (e) => alert("Alert"));
Your custom component properties allow you to add configurable properties that will be displayed in the properties tab on the page builder.
Your custom component dependencies allow you to add references to external stylesheets. For example enter in bootstrap CDN:
Dittofi will then take care of loading that CDN efficiently and you can then use the classes from that library.
Try saving your new custom component and dragging the component onto the page.
In our example, when we drag on our new custom component we can see the word "Test" with the red CSS applied. Clicking on the text brings our alert popup as expected.