In this tutorial you will learn how to implement a widget using Modyo's widget builder. This process requires previous install of a library, ensure you followed the steps detailed in other tutorials of this learning path.
Navigate to Channels, click on Sites. Select your Site.
Click on Widgets.
Click on + New Widget.
Type "example-widget".
Click on Create.
For our example, we will copy the content section of the page "About Minimal" for demonstration purposes.
Click on Save.
Click on Publish
Click on Publish.
Select Publish now and click Publish.
Click on Pages.
Click on About Minimal.
You are now able to see the Custom Widget once it is published. Click on example-widget.
Click on Save.
Click on Pages.
Click on Home.
One of the advantages of Custom Widgets is that they can be easily reused in different parts of your Site. Click on example-widget to add it to the home page.
Click on Publish
Check Home
Click on Publish
Click on Publish
Let's see how to add a widget with code from an external library. Click on Templates
Copy the following code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.min.js" integrity="sha512-v3ygConQmvH0QehvQa6gSvTE2VdBZ6wkLOlmK7Mcy2mZ0ZF9saNbbk19QeaoTHdWIEiTlWmrwAL4hS8ElnGFbA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Click on Save.
Click on Widgets.
Click on example-widget.
Click on HTML.
Copy the following code:
<div class="d-flex justify-content-center bd-highlight mb-3">
<div class="my-chart-container">
hello
<canvas id="myChart" width="400" height="400"/>
</div>
</div>
Click on Stylesheet.
Copy the following code:
.chart-container{
padding:30px;
}
Click on Javascript.
Copy the following code:
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
Click on Save.
Click on Publish.
Check Templates to include these changes for publication.
Click on Publish.
Click on Publish.
Click on Pages.
Click on Home.
Click on Preview.
The Chartjs example will now be shown in the home page.
🏠 Learning Path: Create Microfrontends with the Widget Builder