Clickable link in email sent with the Trigger Email firebase extension - firebase

I am currently using the Trigger Email extension from Firebase to send emails whenever someone is invited to use the app by another user. I configured everything correctly and it is working perfectly except for one thing which is clickable links in the email.
I am using Handlebars with a template which is defined within a Firestore document. The template is made with HTML and looks like this:
<p>Hello {{invitedUser.firstName}},</p>
<p>You've been invited by {{user.fullName}} to join them on App Name here. By clicking on the link below you can accept this invitation.</p>
<p><a>{{inviteUrl}}</a></p>
<p>Best,<br>App Name here</p>
The email will be delivered but the inviteUrl is not clickable, it does display the url within the email. I also tried it using three brackets like {{{inviteUrl}}}.
I have also tried the following:
<p>Hello {{invitedUser.firstName}},</p>
<p>You've been invited by {{user.fullName}} to join them on App Name here. By clicking on the link below you can accept this invitation.</p>
<p>Accept invitation</p>
<p>Best,<br>App Name here</p>
But in this case the email is not delivered at all.. I don't know whats going wrong there. If I do the same but define a url directly instead of using inviteUrl the url is displayed but not clickable.
I have also seen some weird cases where I pasted a html example of a link online in my html and it worked and it stopped working whenever I modified the url, even when I changed the url back to the original one which was working before.
Using helpers for handlebars is not really an option as far as I have read as I am using the Trigger Email extension.
Maybe something is going wrong with storing the HTML in a string field in Firestore but I tried everything I know which is why I am asking this question here.

Alright, found the answer myself...
I was creating the Firestore mail objects from node js and the url I was using was of type any, casting it to String made it work.
The data object was:
{
inviteUrl: dynamicLink,
}
Changing it to this fixed it:
{
inviteUrl: String(dynamicLink),
}
The working html is:
Accept invitation

Related

Dynamically updating the view with Handlebars

I'm working on an app using Express.js and Handlebars. I want to have a page where you can enter text into a search bar, and the view will update to display the results of your search. The backend part of this is already working - the data is being retrieved just fine - but I'm not sure how to best go about updating the view.
I'm using express-handlebars for this app, so the views are formatted as .handlebars files, and being sent to the client via the res.render method. I have seen examples of, for instance, using a button to fill out a Handlebars template, but these examples use a static HTML file with a template in a script tag; I don't know how to translate that to what I'm working with.

Implementing cookies on a dismissible slide-in panel with AMP

I'm implementing a slide-in-on-scroll newsletter signup form on our site, which is built as AMP-native.
I added a button that hides the div on tap using amp-bind, but I'm struggling to get my head around how to save the closed state with cookies/localStorage in AMP.
I've gone through the favorite button example code - https://ampbyexample.com/advanced/favorite_button/ (as recommended here on SE), but I don't see how it relates to this particular use-case, especially with the use of amp-list.
Based on what I've read and few examples I found the credentials="include" attribute is needed, as is a valid CORS json endpoint and an auto generated client id appended to the endpoint url using AMPs variable substitution, but I'm not sure how to put it all together.
I took a stab hacking something together using the favorite button example, but the tutorial doesn't say much about how to setup the CORS endpoint and that particular example is for storing multiple likes to a single endpoint, as apposed to storing a specific users viewing preferences.
Here is my rough (poking-around-in-the-dark) stab at the code:
<form method="post"
id="side-newsletter-wrap"
action-xhr="/prefs&clientId=CLIENT_ID(prefs)"
target="_top"
on="submit:AMP.setState({
showSideNewsletter: !showSideNewsletter
});
submit-error:AMP.setState({
showSideNewsletter: !showSideNewsletter
});">
<button on="tap:side-newsletter-wrap.hide" class="close-button"><i
class="fa fa-times"></i></button>
<amp-list width="320"
height="360"
credentials="include"
items="."
single-item
src="/prefs&clientId=CLIENT_ID(prefs)">
<template type="amp-mustache">
{{#.}}
<?php winefolly_load_fragment('newsletter-embed'); ?>
{{/.}}
{{^.}}{{/.}}
</template>
</amp-list>
</form>
For the prefs endpoint, I'm guessing I'd need to register a new endpoint in WordPress that outputs simple array with the preferences?
Something along the lines of:
{
showSideNewsletter: "true",
winesIndexView: "grid",
winesIndexSort: "title"
}
I also tried the amp-user-notification component (which has the closed state built in) but that felt a bit hacky and the newsletter embed code (via iframe) doesn't get loaded due to a known bug - https://github.com/ampproject/amphtml/issues/18995).
Any suggestions would be much appreciated.
Chris
You're right amp-user-notification is the correct approach. Is there a way to implement the newsletter form in AMP until the amp-iframe bug is fixed?
Another way is to use amp-access, which allows you to change the layout of the page on page load. You have to store the user preference server-side though using the READER_ID to identify the user. Storing this server-side is required as you might not be able to write cookies if the page is served from the AMP Cache due to ITP 2.0.

Trouble adding second reCAPTCHA. Have Contact Form 7 w/ reCAPTCHA

I have a Wordpress site, that uses the Contact Form 7 plugin and the reCAPTCHA functionality that comes with that, and that works great. I just put that part in place, everything is automatic. But now I'm trying to add a reCAPTCHA to another form (on page form1.php) that isn't set up with Contact Form 7. This is on a PHP page that basically includes the Wordpress header and footer, but does its own thing in the middle. One key point is that the footer includes one of the forms from Contact Form 7, so it's on every page on the site.
I followed Google's instructions, forgetting I had the footer form. Then I saw an error in Firebug Error: ReCAPTCHA placeholder element must be empty
That brought me to this StackOverflow topic here. The only answer there by user easy going says that they had the same error when they realized they had imported the library twice.
Ok, that's what I did too I realized. So, I can remove the script inclusion of https://www.google.com/recaptcha/api.js in my code since it's already included by Contact Form 7 (I see it in the source). I noticed Google had instructions for rendering multiple widgets, I checked it out. But the problem is that the script include line specifies the onload callback function. Big problem. I can't change that because Contact Form 7 puts that in, and I can't make a callback function of the same name since it's already used. Of course I don't want to mess with anything that Contact Form 7 does. But as a result, I don't know how to get it to call my callback function in form1.php which is where my HTML element is specified to render the captcha.
Do you see any way around this issue? Any help is greatly appreciated!
Here is the resolution:
Contact Form 7 supports multiple reCaptcha, just need the right HTML markup to use it.
As you can see in the wp-content\plugins\contact-form-7\modules\recaptcha.php, and also in the HTML, the trick is:
Your non-CF7 reCaptcha must be just inside a form element, like this:
var verifyCallbackY = function(response) {
/** your stuff... */
alert(response);
};
<form id="recaptcha-cf7-migr"> <!-- the form element is important! This is what CF7 fetch one by one to find recaptchas... -->
<div
id='yRecaptcha'
class="wpcf7-form-control g-recaptcha wpcf7-recaptcha captcha-hfs"
data-sitekey="*********************************qkuila"
data-callback="verifyCallbackY"></div>
</form>

How to attach html file so that gmail's "view" option works

I have a script that sends an email with an html attachment. When I select "view" in gmail I get text...however when I click on "download" instead of "view", then open it, it displays as it should.
I think it's gmail related because I observe the exact same behavior from IE, FireFox(win/linux), Chrome(win/linux)
I made a youtube video of here:
http://www.youtube.com/watch?v=WkGyxcFQXS8
Am I doing something wrong?
Thanks
Not all email clients support the <style> tag. Gmail is one of those; it only respects in-line styling.
If your code is producing the css & html, then you could change it to use in-line styles for the table.
If you want something more auto-magic, see How do I use Google Apps Script to change a CSS page to one with inline styles?.
One way around this would be to have your script simply host the HTML file somewhere, and email a link to that file.
I cannot find any documentation from Google or the GMail team, but I would be surprised if they allowed HTML attachments to be opened and viewed (this would be a security risk, since they would essentially allow their email servers to host user-generated web content).

Send a file from a web page in Outlook

I have a web page that displays a list of documents stored on the web site. I need to add a link next to each document that can e-mail it. By that I mean attach the entire document to the e-mail.
When clicking the e-mail link, a 'New Message' window needs to display with:
Subject line filled in with the title of the document (displayed on the web page)
Contents of the document downloaded from the web site and added as an attachment
The mail client is Outlook. The server is SharePoint (ASP.NET) which contains web services that are able to download files. JavaScript and any JS library is available for use. I'm not able to deploy additional software to the client.
What are my options and are there any references that achieve this type of functionality?
An alternative might be to put a link in the body of the message to a place where the file can be downloaded. You could even make it a web page that deletes the file after a set time or number of downloads. To be safe you would need to use "mailto:someone#somewhere.com&subject=somesubject&body="+System.Web.HttpUtility.UrlEncode(bodyStringToEncode) to generate an html safe llink
Even with the above answer about launching an email using office automation, you'd still need to first have the file sent to the client, saved in a name and location known to the server, in order to attach the file.
I can't think of a way to attach the document but you can have a link to fill in the subject and body of an email in which you could add a link to the online document.
<a href="mailto:test#test.com?subject=
[your_subject]&body=[url_encoded_content_string]">New Message</a>
You can use this function to urlencode your body text http://phpjs.org/functions/urlencode
Hope that helps,
Josh
Using the HREF mailto, you can make outlook open with the subject at least. I don't know any way to set the body nor an attachment.
From javascript there's no way to automate Outlook using OLE.
example
Taken from:
http://www.angelfire.com/dc/html-webmaster/mailto.htm

Resources