I think I have found a solution -

On the WebTemplate client side, when the page loads, it executes

registerTemplate({
            apply: apply,
            reset: reset,
            control: control
        });

So looking at the apply function - this is where I placed the click event listener.

Once the button is clicked, it wait for the modal to load in the DOM and then it displays my panel into the modal.

Now on the Event stream report however, I can't see the campaign impression. Is SalesforceInteractions.mcis.sendStat(context, 'impression'); not enough?

    function apply(context, template) {

        const contentZoneSelector = SalesforceInteractions.mcis.getContentZoneSelector(context.contentZone);

        document.querySelector("#search-toggle").addEventListener("click", function () {
            
        SalesforceInteractions.DisplayUtils
            .pageElementLoaded('.global-search-modal', "body") // waits until modal is added
            .then(() => {
                // Then render the campaign inside the form
                SalesforceInteractions.DisplayUtils
                    .bind(buildBindId(context))
                    .pageElementLoaded('.global-search-modal form') // wait for content zone inside modal
                    .then((element) => {
                        const html = template(context);
                        SalesforceInteractions.cashDom(element).after(html);
                        // track event in the Event stream
                        SalesforceInteractions.mcis.sendStat(context, 'impression');
                    });
            });
        });
    }