Set url for button in email from datamapper

OL Connect Professional Designer
1

I think this is quite simple, but I can’t find a solution how to set my url from the datamapper in the email.

I want to change the href of the code below with a variable in the designer.

I tested some things with the code below in de standard script:
var link = record.fields.url;
results.attr(“href”,link);

below is the code for the button.

<div>
<!--[if mso]>
    <v:roundrect
        xmlns:v="urn:schemas-microsoft-com:vml"
        xmlns:w="urn:schemas-microsoft-com:office:word"
        href="https://www.example.com"
        style="height: 40px; v-text-anchor: middle; width: 200px;"
        arcsize="12.5%"
        strokecolor="#ffffff"
        fillcolor="#2463a5"
    >
        <w:anchorlock />
        <center>
            <table width="100%" border="0" cellpadding="0" cellspacing="0" valign="middle" style="width: 100%; height: 40px; color: #ffffff; font-family: sans-serif; font-size: 13px;">
                <tr>
                    <td style="padding-top: 0px; padding-bottom: 0px; padding-left: 13px; padding-right: 13px; text-align: center;">
                        <span style="color:#ffffff;font-family:sans-serif;font-size:13px;line-height:40px;text-align:center;text-decoration:none;-webkit-text-size-adjust:none;null"> Naar de actiepagina </span>
                    </td>
                </tr>
            </table>
        </center>
    </v:roundrect>
<![endif]-->
<a
    style="
        width: 200px;
        line-height: 40px;
        background-color: #2463a5;
        border: 2px solid #ffffff;
        border-radius: 5px;
        color: #ffffff;
        display: inline-block;
        font-family: sans-serif;
        font-size: 13px;
        text-align: center;
        text-decoration: none;
        -webkit-text-size-adjust: none;
        mso-hide: all;
    "
    href="https://www.example.com"
>
    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="width: 100%; height: 40px; color: #ffffff; font-family: sans-serif; font-size: 13px; mso-hide: all;" valign="middle">
        <tbody>
            <tr>
                <td style="padding-top: 0px; padding-bottom: 0px; padding-left: 13px; padding-right: 13px; text-align: center;">
                    <span style="color:#ffffff;font-family:sans-serif;font-size:13px;line-height:40px;text-align:center;text-decoration:none;-webkit-text-size-adjust:none;null">Naar de actiepagina </span>
                </td>
            </tr>
        </tbody>
    </table>
</a>
2

Hi Koen,

Please could you drop us an email at support@emea.objectiflune.com with your template and we shall look into this and get back to you.

Kind Regards,
Meena

3

Hi Meena,

thank you for you reply, i allready resolved the problem :wink:

this topic can be closed

1 Like
4

Hi Koen,

I am pleased that you are able to resolve this. Thank you for updating us. Have a nice day!

Kind Regards,
Meena

5

Can you please share how you resolved it. I’m struggling with this right now. Thanks in advance. /Kalle

6

Solved it by doing this:

No href in the button:
<a id="loginbutton" target="_blank">Example button</a>

Then I created a simple script (Selector) in the scrips pane with the selector #loginbutton.
var dynamicHref = record.fields["href"];
results.attr('href', dynamicHref);

1 Like
7

Hi Kalle,

this was my solution too, glad you find it!

8

Please note that when using a anchor element like:

<a id="example" href="https://example.com">https://example.com</a>

You will also be able to change the value of the attribute “href” by a Standard Script like:

  • Selector: “#example”
  • JavaScript code: “results.attr( "href", "https://www.objectiflune.com" );”
1 Like