Matomo dialog / modal (developers)

(Erick Ramírez) #1

I don’t know for sure if it is documented, but I couldn’t find anything about how to use Matomo dialogs/modals. For those looking to implement, for example, a confirmation modal, do this:

In your twig:

<div class="ui-confirm" id="sendNotificationConfirm">
    <h2>{{ sendNotificationConfirm }}</h2>
    <input role="yes" type="button" value="{{ 'General_Yes'|translate }}"/>
    <input role="no" type="button" value="{{ 'General_No'|translate }}"/>

In your script (wrap the following into a function called by a click event or any event you prefer):

piwikHelper.modalConfirm(makeSelectorLastId('sendNotificationConfirm'), {
      function () {
        // Code you want to be executed when the user hit "Yes"

(Matthieu Aubry) #2

Hi @eramirez
Thanks for the suggestion. Created an issue to track this documentation improvement: Document how developers can create modals · Issue #279 · matomo-org/developer-documentation · GitHub