Table token text issue - urgent

[Hoppers13]

hi all, me again!

we've got an issue on a transactional (operational) email whereby we're using a token that's displaying a table, but the formatting of the table makes it difficult to read some of the info because of how it's aligning. 

we remember a supplier had set this formatting up ages ago, but dont remember much else.

we're plugging in our own systems to Marketo, and the only info populating the table is text. where would the formatting be set please? the token i use is just: {{my.TEOrderDetails}}.

is this in admin or? we have a html guy, but he needs to know where to amend the formatting.

thanks as always!

KR, Mike

PS - At the mo, it's just a basic text token: {{my.TEOrderDetails}}, and the data is provided by an API from an internal system, our IT team are adamant that the formatting is applied on our side in marketo.

[SanfordWhiteman]

Without seeing any of your code it’s clearly impossible to answer!

All tokens are edited in the Tokens tab at the folder or program level. Ensure you’re editing the one where the token is under Local (not Inherited).

EDIT: If they’re passing “runtime” values for the token via API, then indeed you can’t edit or even view anything useful within the Marketo UI.

[Hoppers13]

thanks for reply! so, as these emails are API triggered i cant give you a live a proper example, but i can give you this section of code if it helps?:

Dear {{my.TECustomerFirstName:default=edit me}},
<br />
<br />Thank you for placing your order.
<br />
<br />We acknowledge receipt&nbsp;for your paid for selections as detailed below:
<br />
<br />{{my.TEOrderDetails:default=edit me}}
<br />
</div>
<div>
<br />

[SanfordWhiteman]

Well, there’s no table there.

And if you don’t have a sample of how the {{my.TEOrderDetails}} is formatted when sent as part of a (presumably) Request Campaign or Schedule Campaign API call, don’t see how we could help you reformat it.

our IT team are adamant that the formatting is applied on our side in marketo.

This is 100% not true, they’re the ones formatting it.

• If they’re sending “runtime” (i.e. ephemeral) {{my.token}} values with the API call, Marketo does not edit or control that part of the output, it’s output as-is.
• Even if they update the {{my.token}} permanently; you’d be able to see the value in Marketo, but you wouldn’t be able to make a meaningful change to it because they’d overwrite it at the next call.

[Dave_Roberts]

I think that even if you end up adding inline styles for the desktop display (assuming somewhere between 600 and 700px width), this'll still get squished in the mobile display and you're going to end up right back where you started if you're using a table like this to display the information.

A more straight-forward solution might be to paragraph the information rather than table it so that you've got something that's a bit more flexible for both desktop and mobile without needing to do much inline styling.

For example, a more text-first approach something like...

Area: Splashback

Item: 600mm Black Glass Siemens Induction Hob

Selected Choice: n/a

Qty: 1

Area: Siemens Appliances

Item: Combi Microwave, Single Oven & Hood Quartz Worktop

Selected Choice: n/a

Qty: 1

... might be easier to tokenize and fit into the email. 

The code for this might look something more like:

<!-- first item -->
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19px;">
<strong>Area:</strong> Splashback <br>
<strong>Item:</strong> 600mm Black Glass Siemens Induction Hob <br>
<strong>Selected Choice</strong> n/a <br>
<strong>Qty</strong> 1 <br>
<br>
</div>

<!-- second item -->
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19px;">
<strong>Area:</strong> Siemens Appliances <br>
<strong>Item:</strong> Combi Microwave, Single Oven &amp; Hood Quartz Worktop <br>
<strong>Selected Choice</strong> n/a <br>
<strong>Qty</strong> 1 <br>
<br>
</div>

and the HTML shell for the data would look something like:

<div style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19px;">
<strong>Area:</strong> [[TOKEN HERE]] <br>
<strong>Item:</strong> [[TOKEN HERE]] <br>
<strong>Selected Choice</strong> [[TOKEN HERE]] <br>
<strong>Qty</strong> [[TOKEN HERE]] <br>
<br>
</div>

[Hoppers13]

okay so i can't show you full code, but i can give you how it comes through, which might help:

[Darshil_Shah1]

I personally don't think this is much helpful. W/o code, it's a bit difficult to provide a fix for the formatting issue. Additionally, as Sandy says, the token is most likely set at the run time so it's data (including the HTML) should be included in the payload of the request campaign call. The values passed at the runtime in the payload are considered and takes precendence if you have the token already set in Marketo. You should request the team responsible for setting up the necessary configs for triggering transactional emails via requesting the trigger campaign programmatically to provide the value of the token they've have it in the payload.

[Hoppers13]

 hi all,
The token that is sent to the Marketo API via our code is in completely plain HTML format. Example above.

There is purely data. IT can only affect things like the number of columns, the order of columns etc.
All styling is applied on the Marketo side via the email templates.

have we any ideas where i could amend the formatting please?

[SanfordWhiteman]

It’s simply not possible to create table layouts that work in all mail clients without inline styles.

External <style> elements alone can never ensure the layout you want.

[Darshil_Shah1]

Gotcha- you should check whether you have styles defined for the table and its elements in the email then.

Edit- Users generally prefer inline styles within the tokens instead.

[Hoppers13]

great, thanks Darshil, any idea how i'd action this please?

[Darshil_Shah1]

I suggest you modify the token value (i.e., the table HTML) to have the inline styles to ensure they are consistently applied across all the email clients as Sandy notes. Inline CSS has the highest priority so they'll be applied in case of conflicts from internal/external CSS.