Re: Template tips + tricks for specifying link styles and colors within mktoText region so non-developers can use them?

Joe123

When creating Marketo email templates for non-developers to use, we need to rely on them not needing to click the "Edit HTML" button to correct a color or style, and it would be preferred for them to not need to refer to a list of color codes to make sure they get it right if they resort to the color picker.

We can include placeholder content in a module that has the correct inline styles and colors for an example link, where we could even use a variable in the module to allow them to select from a specific palette of three or four colors.

But if they paste over the placeholder content, those inline colors or any Marketo syntax variables are lost.

ex:

<strong>Bold text,</strong> <em>italic text,</em> and <a href="https://internet.c?mt={{program.id}}" style="color: ${module-link-color};"><strong>link text</strong></a>.

after pasting in their own content becomes:

The future's up to you<br />So what you <a href="#" target="_blank" id="">gonna do</a>?<br />

abandoning the inline style, which could be a color or a variable:

style="color: ${module-link-color};"

My workaround when editing content myself is to copy/paste the link from the placeholder content, and then modify the copy and link destination, which maintains the inline style, and I can correct the styles for the non-devs after copy goes through the approval process, but that adds more steps to the process. Also, we can't count on non-devs to perform an unintuitive sequence of copy/pastes just to maintain an inline link style.

We also can't use the "inline css" feature, because that breaks the template and makes the modules in the Modules tab inaccessible.

Are there no good choices here?

My next step would be to build a standalone Marketo paragraph builder that provides an intermediate where non-devs can edit copy and then paste the code into Marketo.

Thanks!

Marketo

SanfordWhiteman

You put the JS in the email template (just loading a remote <script src>, no need to have it be inline).

Hook the TinyMCE events. Alter any <a> before saving.

Then you use Velocity only to make sure the <script src> isn't injected into the final rendered email.

View solution in original post

SanfordWhiteman

Well, how good is your JavaScript? 😎

(You can write a hook that automatically adds the styles to new links.)

Joe123

I was thinking of even building a Chrome extension and Firefox plugin to solve for this.

Does Marketo have its own JS interface for working with email template HTML?

If so, it isn't mentioned in their Email Template Syntax KB.

This would be only be for Email templates.

Since it only appears Velocity Script may be used to parse the message with some sort of regex replacement at deployment, and none of those changes would be visible while composing the message, that solution wouldn't work for the more visual non-devs who are building the messages.

Thanks

Marketo

SanfordWhiteman

You put the JS in the email template (just loading a remote <script src>, no need to have it be inline).

Hook the TinyMCE events. Alter any <a> before saving.

Then you use Velocity only to make sure the <script src> isn't injected into the final rendered email.

Joe123

In the context of Marketo Designer, the result of adding javascript, either inline or with an external file, results in the error:
"Marketo does not allow javascript or script tags in email HTML
Please refresh your browser."

There are some posts marked as a solution for this where characters from the script tag are html encoded and go undetected by the validator, but this simply displays the script tag literally, unable to actually load the script.

https://nation.marketo.com/t5/product-discussions/adding-code-script-into-an-email-validation-error-...

Marketo

SanfordWhiteman

? Works fine as described.

Joe123

Can you elaborate on how this demo was created?

Adding a <script> tag anywhere in an existing email template results in the error I listed previously, and the HTML will not validate.

Are you perhaps adding the tag within wysiwyg region and not directly to the template?

Thanks

Marketo

SanfordWhiteman

<head> of a template, nothing special.

Joe123

Perhaps we are communicating about different types of Marketo templates, or we are using a different version of Marketo.

When editing the HTML of an email template, adding a <script> tag anywhere within the template, including within the <head>, results in the same validation error when saving of validating.

"Limited Access

Marketo does not allow javascript or script tags in email HTML
Please refresh your browser."

Is there an admin setting to disable the validation? I see the title of the error window is "Limited Access".

Thanks

Marketo

SanfordWhiteman

I'm simply creating a template and approving it. Naturally I have Admin access to all my instances but nothing else special.

Perhaps you're getting caught up on the validation warning, but this doesn't stop approval.