Entire button as link #359
Comments
|
Hi there, I believe this is not implemented because of how older outlook behave. It could be done with some Outlook conditionnals but it will add so much overhead. |
|
Really great to hear this is considered. This is arguably quite an important feature. Buttons will almost exclusively be used as call to actions. Missed presses could be quite impactful to the success of emails. |
|
+1. The current button markup does not work for large call to actions. |
|
This would definitely be a nice feature. I will have to use clickable images as a workaround. |
|
Hey guys, we have an update on this. While we were hopeful we'd be able to release this in v3.3.3 and despite the great help of the community, we couldn't find a solution that would work everywhere (Outlook, webmails, mobile email clients...) and for all kinds of buttons (single-lined, multi-lined...). You can see the discussion here: #668 We'll leave this issue open as we'd love as much as you all have a fully clickable button that works! Contributions welcome, as always. |
|
My workaround is to set the |
|
Yeah this would definitely be nice! But just checked a couple of emails, and it seems that many other systems are struggling with this as well.. FWIW: mails from Facebook and Zapier have fully clickable button inside. And something tells me they'll work in every client. So all we have to do is reverse engineer how they did it, right? 😝 |
|
I've just checked a Facebook mail, from a quick look it's a TABLE wrapped
in an A, this will break in some clients.
Kind Regards,
:----------------------------:
Dale McConnell
…On 25 October 2017 at 10:34, Hugo Peek ***@***.***> wrote:
Yeah this would definitely be nice! But just checked a couple of emails,
and it seems that many other systems are struggling with this as well..
FWIW: mails from Facebook and Zapier have fully clickable button inside.
And something tells me they'll work in every client. So all we have to do
is reverse engineer how they did it, right? 😝
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
<#359 (comment)>, or mute
the thread
<https://github.com/notifications/unsubscribe-auth/AKxLOCTEedOqXr7rt_d4RqVZFrsmMqQ4ks5svvKRgaJpZM4Jnymo>
.
|
|
Yeah having a table inside an |
|
Zapier seems to have the But I think that means the button won't have padding in some versions of Outlook, right? Found this also: https://buttons.cm/. But that adds a ton of VML code, which if I read correctly elsewhere is what you are trying to avoid, right? Understandable btw.. But I guess that's what Facebook is doing to make it work? |
|
Yes, Outlook will totally ignore the padding on The main issue on the VML button is you cannot use them inside a section with |
|
Hi, is there anything new about this? |
|
I do not know if it's compatible, but this patch works for me: <mjml>
<mj-head>
<mj-attributes>
<mj-button inner-padding="0" />
</mj-attributes>
<mj-style inline="inline">
.btn-link a {
display: inline-block;
padding: 10px 25px;
border-radius: 3px;
}
</mj-style>
</mj-head>
<mj-body>
<mj-section>
<mj-column>
<mj-button href="https://google.fr" css-class="btn-link">
Test
</mj-button>
</mj-column>
</mj-section>
</mj-body>
</mjml>Testable here: https://mjml.io/try-it-live/rkuGus9G7 |
Doesn't appear to be fixed in the beta either? At least in Gmail on Chrome. |
|
With that many information it will be easy to know what’s going on :)
Can you share a bit of context (html sent/how did you send the email/ markup used/...) ?
… On 25 Apr 2019, at 13:58, Robert Gaal ***@***.***> wrote:
We forgot to say that currently, 4.4.0-beta.1 is available to test with #359 (comment) @cossssmin proposal.
Feel free to give it a try and feedback !
Doesn't appear to be fixed in the beta either? At least in Gmail on Chrome.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.
|
|
Sure thing! Here's the button:
HTML: |
|
@robertgaal Cédric answered you on the Slack, it's a different issue. I quote him:
|
|
I think you have an issue with your beta install, and still probably using the older mjml button package. You should remove any mjml install ( global and local ) and reinstall the beta.
… On 25 Apr 2019, at 14:30, Robert Gaal ***@***.***> wrote:
Sure thing!
Here's the button:
<mj-button href="{{accept_url}}" height="46px" font-size="16px" inner-padding="5px" color="#fff" background-color="#003A8F" width="100%" border-radius="5px" font-weight="500">Accept intro</mj-button>
HTML:
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;width:100%;line-height:100%;"> <tr> <td align="center" bgcolor="#003A8F" role="presentation" style="border:none;border-radius:5px;cursor:auto;height:46px;padding:5px;background:#003A8F;" valign="middle"> <a href="{{intro.accept_url}}" style="background:#003A8F;color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:500;line-height:120%;Margin:0;text-decoration:none;text-transform:none;" target="_blank"> Accept intro </a> </td> </tr> </table>
Result:
https://www.dropbox.com/s/mxjism1n1fozoyp/Screen%20Recording%202019-04-25%20at%2014.28.50.mov?dl=0
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.
|
|
I've fixed my install, so thanks for the heads up. The button is indeed not fully linked but at least with inner-padding the area around the text is just a little more clickable. I'll change the button to simply use a flexible width, using inner-padding to make it completely clickable. Looking forward to beta.2! |
|
I took the version on the "next" branch and see that the fix for full width when working with px is working. But the button is still not fully clickable when using height, the upper and bottom part which are not part of the text are not clickable, any work planned on it? |
|
I think this is the best we can do at this point.
…On Wed, May 1, 2019 at 6:21 PM amidudu ***@***.***> wrote:
I took the version on the "next" branch and see that the fix for full
width when working with px is working. But the button is still not fully
clickable when using height, the upper and buttom part which are not part
of the text are not clickable, any work planned on it?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#359 (comment)>, or mute
the thread
<https://github.com/notifications/unsubscribe-auth/AAELHTN2FUYHLC626UEQ6DLPTG7QXANCNFSM4CM7FGUA>
.
|
|
I think that most of the use cases for buttons contains only one line of text, if this can ease on finding a bullet proof solution I would think it's worth creating one-liner-button component or expose attribute on the current implementation. |
|
We want to cover as many case as possible with If https://buttons.cm/ or any border / padding based buttons technique are fine for you, you can just do your own component. It's not that hard to implement it. |
|
@kmcb777 it has a bug. If you set width="100%" to button, it won't be clickable fully. |
|
@f0rmat1k Hi, as said in the changelog : Fully clickable when width is in px, when width is in % only the inner-padding is clickable. It's still much better than before. |
|
Hi everyone, just checking, as far as I can track from the conversation, it should be possible to have the whole button clickable when only using inner-padding. However, this is what's compiled on my side: It gets rendered in a p tag and the p tag's style has a rule: I have this in my head: And this is the button implementation: |
|
Hey, if I change button width in CSS, it becomes not fully clickable : @iRyusa Is there any way around? |
|
Still an issue in 2022 Any plans to fix this? |
|
As mention in the thread this is the best we can do to maximize compatibility.
… On 7 Jun 2022, at 21:19, miketromba ***@***.***> wrote:
Still an issue in 2022 (Environment is the VS Code extension)
See gif: https://i.gyazo.com/4b9f106eab4e4fe0dd770ea5119dd04f.gif
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you were mentioned.
|
|
@miketromba This is a code snippet of a button that I have had a lot of success with inside MJML. You can reorganize and use as an mjml html component. This one falls back on Outlook/Windows to square corners which I find is a lot lighter when certain ESPs ignore VML for click tracking. |
|
@Leffla48 Thanks! For some reason, unable to see it |
THanks for the heads up, updated it. |
|
You just need to add |
|
This is the code that MJML produces when using HTML What should happen is this: HTML In MSO, This make the whole button clickable in MSO. Results MJML modified button: Is this something MJML team can take? Or should I make a branch? |
this will hopefully fix issues with the button not working on microsoft outlook on PC. mjmlio/mjml#359
this will hopefully fix issues with the button not working on microsoft outlook on PC. mjmlio/mjml#359
and others
Hi Guys,
Firstly - thanks for the great work in building mjml, it makes my life so much easier!
I'm not sure if this is possible or if it's already planned.
Currently, using
<mj-button>withhrefresults in the text on the button being linked, but not the button itself. For a large button with small text, this results in a large area that's not clickable.Is it possible to change how the button links work so that the entire button is a link, rather than just the text?
The text was updated successfully, but these errors were encountered: