Mautic/CMS (Wordpress) integration: toggle an existing element on Website depending on visitor criteria

Product Support
1

I’m using Mautic with Wordpress (but could also apply to other CMS) and I like to dynamically hide/show certain elements on a page, depending on visitor criteria.

I know I could use “dynamic web content” and inject certain HTML into defined places. But doing this I now have design/HTML components in CMS and in Mautic…

I would rather prefer to design everything in CMS, hide it (e.g. using CSS) and then flip a flag on mautic to dynamically display it depending on visitor. Is there a way to accomplish this?

2

And what would that criteria for show / hide be?

3

E.g. when the visitor is coming to a certain page a 3rd time, I would like to show them an extra element (e.g. a mini contact form, or a whitepaper he/she might be interessted in).

And I don’t like to have an obtrusive focus item like a banner or pop-up - I like a more subtile way.

4

You mean something like having some content IDs on WP?
Then a .js file in Mautic would be called and Mautic would return back a ‘content ID’ that can then be shown dynamically on the WP page.

So basically exactly the same as now, but instead of returning some text (or html) Mautic would return an ID that identifies some content on the WP side.

Which would then require some logic on the WP side to presend the content with the ID that was passed…

I thing it would be a very enticing feature for many, however, with a properly designed website and proper CSS inheritance, the current method is probably “technically superior”, maybe with extended documentation about the existing system.

Anyone using Dynamic content for websites served by Mautic? Please share your experience…

5

I was thinking that the text returned by Mautic, just as it is now, could be your ID!
But you still need to add the rendering capabilities on the WP side.

6

If Mautic returns the ID of the element to display, then all that would be needed is a way to pass that ID to a JavaScript function that would “un-hide” the correct element. However, without making the call to Mautic directly, I’m not sure how this would be done.

7

I was thinking along the line:

Possibility 1:
In the dynamic content GUI, we can also define a CSS-ID (e.g. “mini-feedback-form”). I place a HTML element/div on my page with said CSS-ID. Now some javascript on the page (not sure which javascript actually does the dynamic content handling? mtc.js or is using WPMautic-Wordpress-Plugin its own javascript?) does the magic and unhides that HTML element/div.

Possibility 2:
Similar to possibility 1: But the javascript currently already responsible for injecting the dynamic web content has some javascript callbacks/hooks: So I could add a listener to events and when an dynamic content with a certain slot-name is coming, I have some custom javascript code on my page to unhide that element.

Bonus points: instead of just unhide (=show) the element, the javascript could also fill some placeholder variables it gets from the dynamic content from mautic.

e.g. I could have a div on my website, which would initially be hidden (visibility: hidden;)

<div id=“mini-feedback-form”>Hello {prename} not decided yet?</div>

now the javascript would get the content of the div, replace the variable and set the css visibility.

8

You probably need to set some hidden DWC content :<div id="dwc_flag_mycontent1" data-slot-name="dwc_flag_mycontent1" style="display: none;">true</div> where “true” is the content/flag set into Mautic as DWC content)
And then read the value with a jQuery function : var myflag = $("dwc_flag_mycontent1").text(); to do whatever you want then (see toggle/show/hide jQuery functions).

Then you may want to have a look into the MutationObserver(); method to keep an eye on the DWC.

let mMauticForm = document.getElementById('dwc_flag_mycontent1'),
options = {
    subtree: true,
  childList: true
},
observer = new MutationObserver(mCallback);

function mCallback(mutations) {
  for (let mutation of mutations) {
    // do whatever you want 
  }
}

Hope that helps.

9

@ericf Do you think you could implement what you are describing?
If so, I’d be happy to chime in some $, time or both.