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
Related
I am creating a tool for our own confluence server using python 3.7.3 that uploads attachments to correct pages. What I'd like to do is create a thumbnail from the uploaded documents to the pages. I am using atlassian-rest-api to upload documents and update the pages.
How the manually inserted document looks like on page
How the document is opened when clicked
I am already able to upload attachments and I copied the HTML generated by the confluence to "copy" the structure for inserted attachment. After I upload the document I generate new HTML with the attachment such as this :
<span class="confluence-embedded-file-wrapper conf-macro output-inline has-comment-overlay" data-hasbody="false" data-macro-name="view-file">
<a class="confluence-embedded-file" href="/download/attachments/{page_id}/{filename}?version={file_version}&modificationDate={file_mod_date}&api=v2" data-nice-type="text.plain" data-file-src="/download/attachments/{page_id}/{filename}?version={file_version}&modificationDate={file_mod_date}&api=v2" data-linked-resource-id="{file_id}" data-linked-resource-type="attachment" data-linked-resource-container-id="{page_id}" data-linked-resource-default-alias="{filename}" data-mime-type="application/msword" data-has-thumbnail="true" data-linked-resource-version="{file_version}">
<img src="/rest/documentConversion/latest/conversion/thumbnail/{file_id}/{file_version}" height="250" width="180">
</a>
<span class="overlay">
<span class="file-type-desc-overlay">
<i class="aui-icon aui-icon-small aui-iconfont-file-doc"></i>
<span class="content">Document</span>
</span>
</span>
</span>
This is copied from the HTML of the manually inserted document, but the difference is that the links seems broken even thought manually clicking the source actually downloads the file. Also the thumbnail picture seems to be missing because of some automatic conversion process that is taking place when inserting the document into page.
This is how my attempts looks like
When clicking the document
Do you have any idea how the thumbnails should be handled on page for Confluence API?
edit: It would also seem that during update the site drops part of the attributes added?
versus when checking the data just before sending it to the API
<span class="confluence-embedded-file-wrapper conf-macro output-inline has-comment-overlay" data-hasbody="false" data-macro-name="view-file">
<a class="confluence-embedded-file" data-file-src="/download/attachments/66527941/API test page document.txt?version=50&modificationDate=2020-07-07T15:03:36.916+03:00&api=v2" data-has-thumbnail="true" data-linked-resource-container-id="66527941" data-linked-resource-default-alias="API test page document.txt" data-linked-resource-id="66528088" data-linked-resource-type="attachment" data-linked-resource-version="50" data-mime-type="application/msword" data-nice-type="text.plain" href="/download/attachments/66527941/API test page document.txt?version=50&modificationDate=2020-07-07T15:03:36.916+03:00&api=v2">
<img height="250" src="/rest/documentConversion/latest/conversion/thumbnail/66528088/50" width="180"/>
</a>
<span class="overlay">
<span class="file-type-desc-overlay">
<i class="aui-icon aui-icon-small aui-iconfont-file-doc"></i>
<span class="content">Document</span>
</span>
</span>
</span>
Edit:
According to this article part of the attributes that are not "white listed" are being removed by the APIs parser. This means that we can not manually update the page with elements that have custom defined attributes (such as the data-# which are used by the confluence elements).
Edit 2:
Upon further investigation the missing attributes are probably caused by the storage format. Using this information I was able to construct similar thumbnail with the following template:
<ac:link ac:anchor="anchor">
<ri:attachment ri:filename="API test page document.txt"></ri:attachment>
<ac:link-body>
<ac:image ac:height="250" ac:width="250" ac:border="true" ac:class="confluence-embedded-file">
<ri:url ri:value="/plugins/servlet/view-file-macro/placeholder?type=unknown&name=API test page document.txt&attachmentId={attachment id}&version={attachment version}&mimeType=application/binary&height=250"></ri:url>
</ac:image>
</ac:link-body>
</ac:link>
This produced the following result:
Also when clicked it had similar interaction as the one made with editor:
How ever this is still not the result as you get when using the insert with editor.
Note. If you use this method, the thumbnail link seems to break if you update anything on the page manually using the editor.
Edit 3: The thumbnail seemed to get broken during editing because of relative URL. Switch the <ri/url ri:value="/plugins/servlet/..."> to <ri:url ri:value="https://your.wiki.address/plugins/servlet/..."> and it will no longer break
The issue was resolved by changing the html implementation to implementation as I have described in Edit 2 and the secondary issue with the link getting broken is to use absolute URL as said in Edit 3.
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>
I'm running the Axe plugin to ensure the validity and 508 accessibility of my app, and some of the violations reported are too restrictive and I don't know how to fix them because they are valid cases:
1. "Links must have discernible text"
In reference to a Tooltip link which isn't supposed to have any text. It's a graphic and must exist on the page by itself. In general, how do you handle textless links which are very common?
<a href="#" rel="tooltip" data-toggle="tooltip" title="" data-original-title="This is a tooltip icon by itself">
2. All th elements and elements with role=columnheader/rowheader must have data cells they describe
"We are not sure this is an issue, because:
Table data cells are missing or empty"
I have a table where the last column is "Actions" that only contains graphic icons, no text; e.g. there's a View button, Edit button, and Delete button. The column is structured as
<table>
<tr>
<td>
<a href="javascript:void(0)" title="Edit">
<i class="fa fa-pencil" alt="Edit"></i>
</a>
<a href="javascript:void(0)" title="Delete">
<i class="fa fa-trash" alt="Delete"></i>
</a>
</td>
It's the lack of inner-HTML text that triggers Axe's "Empty Cell" violation. Do I just ignore it? This is a common scenario, I don't want to be hit by it constantly.
If your icons, graphics, buttons, or links execute some action you need to provide some text alternative to screen readers that describes the action taken by the link.
Either add an aria-label attribute to the links describing their purpose, or place a span tag with descriptive text within the link that is hidden from sight using CSS but will be accessible to screen readers.
Additionally your usage of the alt attribute on your i elements is incorrect. You should hide the icon using aria-hidden="true", and provide a text alternative via another element.
There is nothing inherently wrong with having an empty td element within a table as the td element has the roll of cell and elements of the roll cell do not require an accessible name. If the cell contains content such as an icon you would want to make sure that an accessible alternative is provided, or if the content is strictly decorative appropriate action is taken.
https://www.w3.org/TR/wai-aria-1.1/#cell
An issue would arise if you had an empty th element as it would have a role of either rowheader or columnheader, and an accessible name is required for both.
https://www.w3.org/TR/wai-aria-1.1/#columnheader
https://www.w3.org/TR/wai-aria-1.1/#rowheader
Helpful information for using icons: https://www.w3.org/WAI/GL/wiki/Icon_Font_with_an_On-Screen_Text_Alternative
Information on describing the purpose of a link: https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html#navigation-mechanisms-refs-techniques-head
Hiding content from sighted users:
https://webaim.org/techniques/css/invisiblecontent/
When you add a button on a Mailchimp template, only the text within the button is clickable. Not sure why they designed it this way...is there a good reason for this?
If not, is there an easy way to make the entire button clickable...I've thought about just creating a button image...and making it linked...but trying to avoid that if possible.
Give this article and technique a go.
https://www.emailonacid.com/blog/details/C13/bulletproof_buttons_for_office_365_and_everything_else
I use it every where and it has a fall back for Outlook.
Be sure to check the comments for any tips from users who have figured a few quirks out from the originally supplied snippet.
Like my comment about adding stroke="f" to the snippet to remove the default stroke on linked buttons.
The easiest way to get a button fully clickable is to build the button with an HTML table and wrap the table in an anchor, like so:
<a href="http://www.website.com">
<table border="0" width="">
<tr>
<td><span>Click Here</span></td>
</tr>
</table>
</a>
It is not valid in HTML4, but is valid in HTML5, but not much of what goes into an HTML email is valid, so I do not worry about it.
The problem with this approach is that it is still hard to edit in most, if not all, HTML Email platforms, such as Mail Chimp or Campaign Monitor. A non-coder who sends email will have to go into HTML view to edit the email - not ideal.
In MailChimp, their editor breaks the parent anchor, stripping it out altogether.
Test it in your email platform of choice, it is a simple solution.
I coded some basic share buttons in HTML and CSS. I want to place these buttons on 300 different pages on a simple HTML website.
Is there a easy way to ask for the current link of the website instead of typing in the website URL manually?
Example:
Page 1 www.site.com/home.html
<a class='share-facebook' href="http://www.facebook.com/sharer.php?u= www.site.com/home.html" target="_blank">
This will now share the home page through Facebook:
Page 2 www.site.com/info.html
<a class='share-facebook' href="http://www.facebook.com/sharer.php?u=[current website url-tag or code?]" target="_blank">
What do I type in at "current website URL tag or code" to get the desired outcome? (share www.info.html without actually manually typing in the URL)
Is it even possible with only HTML? If not, how should the JS look like?
No, this isn't possible with pure HTML. In fact, this is often done server-side using languages such as PHP:
<a class='share-facebook' href="http://www.facebook.com/sharer.php?u=<?="http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"?>" target="_blank">
In JavaScript, you'll probably have to assign an id to your link first.
HTML:
<a class='share-facebook' href="http://www.facebook.com/sharer.php?u=[current website url-tag or code?]" target="_blank" id="facebook-button">
JavaScript:
document.getElementById("facebook-button").href="document.URL";