Mailtrain widget in Wordpress doesn't work, because script "widget" is not loaded and get's error 500 (it is actually allowed by CORS)

[saschafoerster]

I try to embed the subscription widgets in our wordpress site: https://bonn.digital/newsletter/

Console shows that 2 ressources can't be loaded:

[Error] Failed to load resource: the server responded with a status of 500 (Internal Server Error) (widget, line 0)
[Error] Failed to load resource: the server responded with a status of 500 (Internal Server Error) (widget, line 0)

It's for instance this resource: https://newsletter.bonn.digital/subscription/SyYqN20uz/widget

I get a "Not allowed by CORS", even when I open this link in a separate window and not embedded somewhere else.

[saschafoerster]

@j-mir-prazak Do you maybe have an idea for this issue as well? I would like to embed the new forms (with the custom css) in this website: https://bonn.digital/newsletter/

[j-mir-prazak]

@saschafoerster could you just point me, how to create a widget - i haven't used mailtrain that much, just poking around before we use it - and i have terrible time finding how to do things there :-| . i can have a look-see then...

[j-mir-prazak]

@saschafoerster @bures so i had a look and i guess that widget is stuck around from v1 and haven't seen much care since (https://github.com/Mailtrain-org/mailtrain/blob/v1/docs/README.md#subscription-widget). there are serveral issues with it:

1/ cors allowed origins is not set: this was supposed to be set in config file, which is now done by docker-entrypoint.sh, which does not have env variables for cors origins. if you add cors values into the /server/config/production.yml, they do get loaded, however the route does not respect them anyhow - there is also problem with returning the origin, debugger returns undefined -- have will have a look why

2/ the widget return JSON with parsed html of the form, so you need to also embed JS script to parse it (domain.com/static/subscription/witget.js) and it does not include style properly. also the template for it might be obsolite, because it is html and not mjml ( it is also simillary used at reset password from - html template - which seems to be broken for me now). there is also different structure in the data object, so the form does not get parsed in the first place. it is easy to fix but the rest does not seem to work properlly.

3/ the styles are not included in the response, or not editable in the UI - or at least I did not find them there. so it might be hard to style the form

the whole thing begs the questions what the widget function is for anyway: you could easily use form in iframe as a widget and it might work much better and out of the box. or is there something i am missing? i cannot really put my finger on what the widget offers, that iframe (which seems to be preferd method for cms i used) does not? thanks for any insights!

[bures]

I'm not sure if I even ported the widget to v2. I've never used it, so don't expect it to work. If you manage to make it work or create some widget for v2, I'll be happy to merge it.

[j-mir-prazak]

@saschafoerster @bures well i can try, but i still would need to know, what is the purpose of the widget in the first place - why not iframe, what it is supposed to solve? because the vestage i was able to bring to life was not really doing much else, only without iframe

[bures]

I wasn't the one who introduced it in v1. I never needed it for v2, that's why I didn't port it. So if you need it, create it based on your own requirements. IFrame with the form is certainly an option. In the installation I maintain, I just link from the websites to the subscription form.

[j-mir-prazak]

@bures sorry, it was meant more for @saschafoerster , he suggested me looking at it

[saschafoerster]

@j-mir-prazak I am no expert in it, but I liked how the widget worked. I added the link to the form I created in Mailtrain (https://newsletter.bonn.digital/subscription/SyYqN20uz) into the backend of Wordpress. The form will have the same fields as the link. The CSS will be taken from the Wordpress-Theme, or I can create my own CSS to style to form with CustomCSS in WordPress. With iFrames, I often had problems on mobile devices, some don't allow iFrames. Thank you so much for your time anyway. Maybe, how would you style the iframe-code, with my example link? Then I would check how that looks in our website, maybe that's a good workaround the widgets.

[j-mir-prazak]

@j-mir-prazak well, me neither :) i tried this:https://wak.sherman-mccoy.duckdns.org/iframe/ (sorry, it is work in progress website, but it is live and little real worldy at least). and yeah, i get now, why the iframe might be pain in the butt to get propper height with....

so, the html/css - there is responsive framework added, just to make it work on our site, however the most importatnt is probably set the height in style - i did it with em and it seems to hold with zooming and on phone. but it is a drag, that i cannot be set automatically.

i put there the second form just to show you - in case you did not know, i do not know if it is in documentation, i found it fixing the css loading - that you can actually force another style on form: you can have two different form templates and then pick one as the primary of the subscription list and use secondary on the same list with "fid" query parameter - where the number is the number of the custom form template, you can see in forms edit url.

that way you can have the primary template for the whole web link to mailtrain and secondary template without background color set that you can integrate with transparency to your site.

<div class="uk-grid">

<div class="uk-width-1-2@m uk-width-1-1">
        <iframe style="width: 100%; height: 50em" id="newsletter" allowtransparency="true" src="https://lists.sherman-mccoy.duckdns.org/subscription/UGNANXUQZN?locale=en-US"></iframe>
</div>

<div class="uk-width-1-2@m uk-width-1-1">
        <iframe style="width: 100%; height: 50em" id="newsletter" allowtransparency="true" src="https://lists.sherman-mccoy.duckdns.org/subscription/UGNANXUQZN?locale=en-US&fid=2"></iframe>
</div>
</div>

does that make sense? i do see the merit of the widget now, however i am not sure if i am up to the integration...

[ericuldall]

I did some work on our instance to get the widget usable but found it was not worth the trouble. At the end of the day the widget isn't customizable enough for my needs.

We were better off just doing a simple integration with the API. I built a public intermediate API that allows access to only subscribe users. Now we can do front end only integrations pretty easily and allow our clients to use that endpoint on their sites as well without risk of exposing API keys.

I think I widget is good but would need the following features:

• Easy copy/paste integration (iframe)
• Limited security domain hurdles (I think the CSRF stuff presented issues for me)
• Easily able to customize look and feel of the form

[saschafoerster]

@ericuldall Would you be ready to share the changes you made for a (semi functional) widget anyway?

It seems to me something has changed in the meantime. In the website, where I integrated the forms (was functional with mailtrain v1) I now get this error message:

{
    "error": "Cannot create property 'template' on string 'subscription/widget-subscribe.hbs'",
    "data": []
}

Live: https://bonn.digital/newsletter/

[talheim-it]

We are going to start with the development and testing of mailtrain v3 in the next weeks.

You are welcome to help us with the testing as soon as the first release candidate is available.