I have a custom html newsletter for mailchimp. I created editable parts everywhere and it works just fine.
I also made a custom button and I would like to make its href attribute editable. When I add mc:edit on the a tag itself, I get to edit only the text content of the a tag. So I give mc:edit on the container td so that I can edit the a tag itself. This way I can edit the button but my client has to click on <> sign on the editor and edit manually the href attribute. This is not what I would like. I would like them to fill something like an input where all they have to do is to just paste url in there. Is there a way to achieve this?
Inscription
You'll need to take the url pasted in and then pass the html back to the form. For example:
<span mc:edit="chat_button_"></span> would be replaced with
<a class="mcnButton " title="Chat Now" href="destination" target="_blank" style="font-weight: normal;letter-spacing: normal;line-height: 100%;text-align: center;text-decoration: none;color: #FFFFFF;">Chat Now</a>
Related
Was wondering why when I clicked my button in html it wasn't responding later found out that it will only respond and redirect when I clicked the wording inside "Get Started" was wondering why. This is the code I'm using
<div class="main">
<div class="main__container">
<div class="main__content">
<h1>RAID 2 EARN</h1>
<h2>TECHNOLOGY</h2>
<p>We make it easy!</p>
<button class="main__btn">Get Started</button>
</div>
<div class="imgmain">
<img id="main__img" src="/IMGS/picture1.svg"/>
</div>
</div>
</div>
It is because you're actually clicking the anchor tag inside of the button and the button click doesn't have any actions associated with it. The size of the hyperlink is always only the size of its content. You should change your CSS to style your hyperlink to look like a button. Typically, you can do something like this:
<a class="main__btn" href="raid2earn.html">Get Started</a>
This way you're HTML spec compliant and your hyperlink is styled to look like a button but you're using default browser patterns to complete your action.
Your anchor tag is enclosing only the 'Get Started' text instead of the button. This way, only the text becomes a link
Actually, every html element has a job.
<a> for connecting to outer files
<button> for the inside actions
And you can style everyone as you want.
But:
if you still need to use the button and put the a inside and need to be able to click the button and do the action of the a, there are many many ways, some in html, some in css, and others in javascript.
In html, the easiest solution to your issue is to flip the elements, and make the a outside the button like that:
<a href="#">
<button>Click the button now</button>
</a>
This one is just the easiest.
And there are many others in html and css and javascript.
But again, you must use every element in its own purpose.
Sure you are putting a link tag inside a button because you want a button look and feel. just style your a element the way you want your button to look like as suggested above.
Cheers
I have a "migrated.html" page in root directory. How do I add that link to this CSS style button?
<button onclick="#" Migrated</button>
The above html code didn't work for me.
Here is the link to the code set:
https://codepen.io/prateek-vishwas/pen/Rwwpzjo
There are a few different ways to accomplish this.
But, from what I understand, it sounds like you just want an anchor <a> tag with a href attribute that is styled like this button.
You can simply just set the same class on the anchor tag that is on the button, so you should receive
<a href = "url-to-ur-page" class = glossy-button glossy-button--red>Migrated</a>
Why it has to be a button ? Why not use the normal "A" tag and style him like a button ?
<a href="migrated.html" class="glossy-button glossy-button--red">!!!Migrated!!!
</a>
Works in your codepen - ijust moved the migrated text inside the tag
This will work even without javascript.
Anyhow.the js to change the current url is
window.location = 'your url';
<button onclick="window.location='migrated.html';">
Migrated
</button>
which also work in your pen
I created a signature in outlook 2010. Then I opened the htm file. I added a a tag around the text with a href and added text decoration:none and a color. Now when I send my email it shows still with a underline. My styles are still in the mail but on the span tag IN the a tag. It just adds a random span tag and cut the styles from the a tag.
www.site.nl
It shows up like this :
<a href="https://www.site.nl/">
<span style="text-decoration:none; color:#333;">www.site.nl</span>
</a>
Is there a way to prevent this?
We are facing below issue in Microsoft Outlook Email 2010.
We are generating an Email having an HTML body from our application The email has multiple links to other pages using anchor tags.
When the user hovers over these links, the URL is shown in the tooltip.
It is required to suppress the URL shown on hover of these hyperlinks.
We tried to use ‘title’ attribute of the anchor tag, but it seems to not work in Outlook; it still displays the entire URL on hover and ignores the title attribute.
for e.g.
Email HTML used:
<a title="" href="[some URL]" data-type="link" title="my custom tooltip">Click Here</a>
Is there any way to achieve this?
Thanks in advance.
Vikas
Keep in mind that it is Word that renders HTML in Outlook, not IE. If you can't make it work in Word, it won't work in Outlook either.
Is there a way to only allow a user to edit a link's destination, and not the link itself, using MailChimp's template language? There doesn't seem to be anything about this specific situation in their documentation.
For example:
<a href="link.html" target="_blank">
<img src="button.gif" alt="Button Name" />
</a>
So I want to allow the user to ONLY edit "link.html" to point somewhere else, as the link button never changes.
Unfortunately, to make matters more complicated, there's an unknown number of links in the template (thanks to the use of mc:repeatable), so the solution cannot be hard-coded to a specific link.
Is this possible?
I ran into exactly the same issue today. It seems the individual href attribute cannot currently be made dynamic using merge tags in Mailchimp.
The best workaround I've found is to create an editable field (span) within the repeatable section that contains the link and button image.
<tr mc:repeatable>
<td width="600px">
<span mc:edit="offer_link">
<a href="http://www.mywebsite.com" target="_blank">
<img src="http://www.mywebsite.com/images/button.png" width="100" height="30" alt="view offer button">
</a>
</span>
</td>
</tr>
When the sender creates the email from the template, they can click the '<>' icon in the editor to edit the html for the link. They'll need some very basic HTML knowledge but it'll do the trick.
In your MailChimp template, instead of using <a href="link.html" target="_blank">, use a Merge Tag instead. So for example:
<a href="*|CUSTOM_URL|*" target="_blank">
Follow these steps to complete the set up:
Go to Lists > Create Forms and add a new input field.
With the field selected, click on Field Settings.
Label the field Custom Url.
Set the Field Tag to CUSTOM_URL
Uncheck Required Field.
Set Field Visibility to Hidden.
Set the Default Merge Tag Value to http://www.example.com/new-link.html (in other words, this is where the SENDER would input the absolute URL that you want your link.html changed to before sending each Campaign.
When the Campaign is sent, it will automatically fill in this default link (new-link.html) for the href attribute on the link without the SENDER actually modifying the campaign.
Just be sure that no one actually enters a value into this field when adding subscribers or it will override the default value set by the SENDER.
I have come to the same conclusion as many here, there is no easy way to do this in MailChimp, or Campaign Monitor.
In MailChimp, the only current way is to use their boilerplate templates that have "Content Blocks," which make editing very simple - you just can't custom code your own template. What we need is the ability to code custom templates with 'Content Blocks,' which is not currently available in MailChimp.
Read about Content Blocks Here:
http://kb.mailchimp.com/campaigns/content-blocks/about-content-blocks