A

Anonymous

Solved

Can a calendar token be changed to a button?

Forum|Forum|10 years ago
January 15, 2016
5 replies
5357 views

Were trying to use the calendar token but we'd like it to be a button, instead of straight text. Does anyone know if that's possible?

Marketo

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Frank_Breen2

This is what I'm doing, it my template I set the Button as follows:

<tbody>

<tr>

<td style="display: block; color: #ffffff; font-family: Arial; font-size: 14px; background: #0a5bae; margin: 0; padding: 12px 20px; font-weight: bold;" align="center" valign="middle" bgcolor="#0a5bae">{{my.Calendar}}</td>

</tr>

</tbody>

</table>

Then in the Hyperlink Text section within the token I add the following <span>:

<span style="background: #0a5bae; color: #ffffff; font-family: Arial; font-size: 14px;">Add to Calendar</span>

If the browser supports the <style> tag (i.e not Gmail) in the Head, then I add

a:link, a:visited, a:hover { text-decoration:none; color: #ffffff; font-family: Arial; font-size: 14px; }

That will stop the annoying blue line under the link (mainly in all clients except gmail).

This is a close to a button that I can get it.

Casey_Grimes2

New Participant

What I've done in the past (and admittedly, this is rather obnoxious) is to go ahead and place the token in an email, use a preview to grab Marketo's actual hosted .ics path, and then manually create the button with that URL.

J

JDNelson1

Community Manager

I've done this as well -- then I have an entire folder in Design Studio for hosted .ics files. super obnoxious, but a fairly easy (although not fast) process.

A

Anonymous

Is this for email or LP? I'm not sure if it's possible for email, but one alternative is to build your template so that the calendar token is in a cell that has a background color. This is how I've build templates before - so that the link is still text but appears to be on a flat button that's really just a colored background

Frank_Breen2Accepted solution

New Participant

This is what I'm doing, it my template I set the Button as follows:

<tbody>

<tr>

<td style="display: block; color: #ffffff; font-family: Arial; font-size: 14px; background: #0a5bae; margin: 0; padding: 12px 20px; font-weight: bold;" align="center" valign="middle" bgcolor="#0a5bae">{{my.Calendar}}</td>

</tr>

</tbody>

</table>

Then in the Hyperlink Text section within the token I add the following <span>:

<span style="background: #0a5bae; color: #ffffff; font-family: Arial; font-size: 14px;">Add to Calendar</span>

If the browser supports the <style> tag (i.e not Gmail) in the Head, then I add

a:link, a:visited, a:hover { text-decoration:none; color: #ffffff; font-family: Arial; font-size: 14px; }

That will stop the annoying blue line under the link (mainly in all clients except gmail).

This is a close to a button that I can get it.

J

JDNelson1

Community Manager

This has been my latest method as well. In past jobs our preferred calendar button was not easily create-able by colors and boxes. But when we redesigned our templates we took that into consideration and switched most of our buttons to this style. A sad step backwards, visually, but a step towards easier automation.

J

JohnCl9

Employee

Hi Jace,

The token itself won't work as a link behind a button/image, but if you create the .ics file yourself and upload it to your design studio, then you can use the link to that file as the link behind your button.

John

Grégoire_Miche2

New Participant

Hi Jace,

It's not an option available in Marketo. But this is something you might be doing with a little CSS. it will not work on all email clients, but at least for some...

-Greg

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded