I finally figured out how to get the dynamic content working on external Wordpress site (hint: CORS-settings)

Hello,
After banging my head against the wall trying to figure out how to embed dynamic content on an external Wordpress site, the wall finally broke before my head did.

I have been trying to find information about this but documentation has been rather sparse, or outdated so i tought i’d make a little writeup of my findings in hopes it might be useful to someone;

Im running Mautic 4.0.1
The Wordpress site is sitting on a different domain
I am running the WP Mautic plugin in Woocommerce, i guess it is a requirement but i have not tried without it so i can’t be sure.

I created dynamic content using both the methods mentioned here, Dynamic Web Content (DWC) | Mautic , both filter-based and campaign-based, but i could not get them to show up on the Wordpress site.

Forms generated by Mautic did show up, though, which i found strange.

Always test in another browser, i do the admining in Chrome but i use Edge as a “user-test-platform”, reason being you cant be logged in to Mautic at the same time, it won’t work

After sifting through the whole of Google, i saw mentioning of CORS (Cross-Origin Resource Sharing).
I inspected the page and behold, CORS-errors that clearly stated that no access-control-allow-origin was present, my wordpress site was not whitelisted to request resources if i understand correctly what was going on.

So i entered this into the .htacess file on my Mautic installation;

Enable CORS

Header set Access-Control-Allow-Origin “https://pureest.se

Which did not work, because i left out a www;

Added www, and then got new exciting errors;

Added this line to the htacess;
Header set Access-Control-Allow-Credentials true
and got new errors;

Finally added this line to htaccess;
Header set Access-Control-Allow-Headers: “X-Requested-With”

And was greeted by this;

Htacess additions i did not need to use, but found during my travels, i don’t know what these do but someone else might?
Header set Access-Control-Allow-Methods": “GET,HEAD,OPTIONS,POST,PUT”,
Header set Access-Control-Allow-Headers: “Origin, X-Requested-With, Content-Type, Accept, Authorization”

Final shot of htaccess, green bits are commented out and not used;

I had never heard of a CORS and did not know whether it was a cheese or something you smoked before i ran into this, but I’m so glad i got it working! Hope this helps someone!

Cheers Carl

2 Likes

This is helpful for the community. Thank you.