Using 2 widgets on a single page that communicate based on their JS is fairly easy. This is useful when you want to have one widget react because of the changes from another widget. The following is a simple example of 2 widgets changing each others output on the same page based on an action. For this example we will create to widgets. One widget is named widgetA, the other is widgetB. Inside widgetA we will set the following code:



- WidgetA -


HTML Tab

 

<h3>Alice in WidgetLand A</h3>
<button id="buttonA">Eat Me</button>
<span  class="marginLeft" id="widgetA">Hurry...</span>


 

CSS Tab

 

.marginLeft {
    margin-left:25px;
}

 


JAVASCRIPT Tab

 

<script defer>
    var countA = 0;
    $('#buttonA').on('click', function() {
        $('#widgetB').html('Cakes: ' + ++countA);
    });
</script>

 




- WidgetB -


HTML Tab

 

<h3>Alice in WidgetLand B</h3>
<button id="buttonB">Drink Me</button>
<span class="marginLeft" id="widgetB">No Time!</span>

 


JAVASCRIPT Tab

 

<script defer>
	var countB = 0;
	$('#buttonB').on('click', function() {
		$('#widgetA').html('Drinks: ' + ++countB);
	});
</script>

 


You will notice that only WidgetA has the CSS Tab with some code. This is because a CSS style in a widget on a page can affect all other codes that have the same style id or class in any other widget on the same page, so there is no need to add it again on WidgetB since both will be used on the same page.


Now for the next step, we will add both Widgets to the homepage. For this, please make sure that the Settings -> Design Settings -> Homepage Layout -> Homepage Section Order has at least one section with Custom Homepage Content enabled. This will allow us to customize the homepage with any new code and add sidebars, widgets, forms and more to it.




After we have confirmed the Custom Homepage Content option is enabled on any of the Section Order options we can add to the homepage (Content -> Edit Web Pages)  the following 2 widgets:


[widget=widgetA]
[widget=widgetB]


So the end result looks like this:



Now let us test them by going to the homepage. You should see the following on it:



WidgetA is the top one, WidgetB is the bottom one, as in the order you put them on the homepage content. When clicking on the Eat Me button on WidgetA, you will change the No Time! text on WidgetB. Similarly, if you click on the Drink Me button on WidgetB, it will change the Hurry... text on WidgetA.



This might look like a basic example, but we can see how the output of 2 different widgets can communicate with each other through JS and even send information to the backend (eg: Ajax, Rest, Soap) based on the action of another widget.