@plomteuxquentin I reset up the token identifier, and I never installed all the non silly me. I’m new to to this stuff, but it is alot of fun and things are working so it makes it kind of exciting to utilize.
@logan The following package is available on corvid:
https://www.npmjs.com/package/qrcode I’ve never use it and it might not be suitable but that’s a start. Plz let me know if that works
You can directly attach file to an email as well with nodemailer. So you could use qrcode to generate the image and attach it to your email. It this is just a theory I don’t know if it can work (but keep me posted i’m curious)
@giri-zano Hi Giri,
This is the api that I was looking into. my only worry is having the image link causing my emails to go marked as spam. Also with this api, how could I save the image the a var such that I can save the image to a wix database containing the rest of their order information?
@plomteuxquentin Hi Quentin, so I’ve got almost everything working with the email. The qr code is sending, so i decided I want to try to create an html body email that goes with the html src linked image. However, the email keeps coming to me as RAW html code
<td><p>Congrats! You have successfully registered for the Orange Park Acres 4th of July Races.</p><p>Below is your unique qrCode for Early Bib Pickup or Race Day.</TD><p><img src= "https://api.qrserver.com/v1/create-qr-code/?data=myqrcodedata&size=200x200&bgcolor=FFFFF&margin=6"/></p></td>
I’m using the gmail client, so I wouldn’t think html would be a problem.
My page code to send the message is:
export function mail_click(event) {
var participantsEmail = $w(‘#input2’).value;
var participantsName = $w(‘#input1’).value;
var participantRandNum = Math.random().toString(36).substring(7);
var participantsNameReady = participantsName.replace(" ", “,” + participantRandNum + “,”);
//encodeURIComponent(participantsName.trim());
var qrCode = “https://api.qrserver.com/v1/create-qr-code/?data=https://www.mydomain.org/validar?vid=” + participantsNameReady +“&size=200x200&bgcolor=FFFFF&margin=6”;
$w(‘#text37’).text = Math.random().toString(36).substring(7);
var registrationMessage = {
to: participantsEmail,
subject: ‘Registration 4th of July Races’,
text:‘hello this is a custimized message just for you!’,
html: ‘
Congrats! You have successfully registered for the Orange Park Acres 4th of July Races.
Below is your unique qrCode for Early Bib Pickup or Race Day.
</p’
//here is the code I’m using to assign the html to be emailed.
};
sendApprovedAddress(registrationMessage.to,registrationMessage.subject,registrationMessage.html);
console.log(“emailSending”);
}
@logan You are missing some essential html-parts, like, ,,
and .@giri-zano XD omg. Haha I completely overlooked the fact that it wants all of the html elements. THANKYOU!
@logan So it works with the html tags?
And the problem here is not the client sending the email but the client receiving the email. Make sure your email is readable across different mail boxes.
@plomteuxquentin @Giri Zano
So, I fixed the code to be proper html formatting. it it still coming to my gmail inbox as raw code.
I just did this one as a test. I have been reading the nodemailer npm package information, and they have an example that is just
html: ‘
For clients that do not support AMP4EMAIL or amp content is not valid
’and I attempted this example. Which still can through as raw text.
<html><body><p>Congrats! You have successfully registered for the Orange Park Acres 4th of July Races.</p><p>Below is your unique qrCode for Early Bib Pickup or Race Day.<p><img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/></body></html>
I don’t know if there is still something wrong, but the html preview is reading it just fine. But it is still coming through RAW. I would have thought gmail wouldn’t have an issue with an html email.
any suggestions?
@logan Maybe check online gmail specs regarding html or how to design email with html. As stated before, html in email can be tricky.
try sending nodemailer example to see how it is output:
var message = { from: 'sender@server.com', to: 'receiver@sender.com', subject: 'Message title', text: 'Plaintext version of the message', html: '<p>HTML version of the message</p>' };
I’ve check the rest of nodemailer doc and the don’t say more about html so I guess that just it.
Maybe share the last version of your code again
@plomteuxquentin Ok, so I got the message to send as an html email using their exact template, but that requires me to put the sender “from: ‘sender@blabla’” in the page code rather than back end as you project had done. which is guess is not a big deal.
Next, when I try to put a variable in the html message, it then will not display the html properly. I want the source to be a url and at the end of the url should be a string of unique characters for that specific customer. How can I put a variable in the “src=” html tag?
I currently have it as:
var qrCode = “https://api.qrserver.com/v1/create-qr-code/?data=https://www.equalizersrunningclub.org/validar?vid=” + participantsID + “&size=200x200&bgcolor=FFFFF&margin=6”;
var messageTest = { from : ‘orangeparkacresraces@equalziersrunningclub.org’, to: participantsEmail, subject: ‘Message title Subject here’, text: ‘Plaintext version of the message variant text for emails that dont support it’, html: ‘
HTML version of the message
<<img src=+ qrCode +
/>’ };
any suggestions to inserting a variable in the html code for a unique src url?
@logan your backticks in img tag look wrong. Try using a simple quote instead. Also you have a double opening angular bracket before img tag that might might render you html invalid there for disabling it.
for testing purpose I would directly use the url string with using qrCode class with a controlled partricipantsID so you can test it with minimum of unknown.
I ended up working around this variable issues with this code.
var messageQr = {
to: participantsEmail,
subject: ‘Registration 4th of July Races’,
text: ‘Plaintext version of the message variant text for emails that dont support it’,
html: ‘
HTML version of the message
’};
messageQr.html = “
HTML version of the message
I edited the code so that it just edits the .html property of messageQR outside of the variable field. It would not allow the use of a javascript variable placed in there.
@logan So it works like that?
@plomteuxquentin yeah it only works if I edit the property outside of the variable creation.
Hey can either of you post an updated code for this? I’m dealing with a few errors. I have everything loaded. I’ve ensured the token, id and secret match. I’ve messed with the code based on some of the suggestions here, and get 1 of 2 errors. “Unhandled promise rejection TypeError: Cannot read property ‘sendMail’ of undefined”
or if I don’t update the refreshtoken deprication, it says user and password rejected?
Any ideas what I need to change specifically?
Thanks in advance.
Hey @logan I just recently posted my code to this site I tried tagging you but for some reason it failed to work. I followed your coding after many attempts at failure. I’m hoping to modify it to fit my needs. I’m fairly new to coding too. And now figuring out how to implement it with wix has been tough. I ran into similar situation as you so I reverted to using @plomteuxquentin code, which also worked for him. I fixed the spelling error, if there was officially one? But I still get errors. At least I can understand more the error I get. If either of you see this and can help I’d really appreciate the help. I’m attempting my first dynamic website for my brothers company and would love to get this set up. I have more of a marketing background and have been trying to implement as many onsite tools as possible. This is the latest roadblock though. I’d also love to get some additional advice. I’d also like the tool to be used dynamically to send emails to lists of people collected in a database as well as automatically send the form to the user. I’m sure this might be obvious and I’ve probably used the method somewhere on my site already. But frankly I have a hard time enough with understanding regular java script at this point, and understanding wix api and when to implement the use case has just made that even harder. I took on this project, not having used wix, thinking I could still have the ability to code freely and I’m now in a bit over my head. This feature is the last thing I want to implement before I can at least post the site. From there I finally focus on the client pages!
@patrickoconrad
Hi Patrick heres a list of quesitons I have for you first:
- have you installed the nodemailer npm
- have you installed the googleapis npm
- have you installed the lodash npm
- have you setup a new project on your google cloud dashboard
- have you taken into account the limit of api email request a free user can send per day/hour
- have you then gone through the google auth playground to get the token you need
- have you setup two backend javascript files (one for the config such as the nessecary api tokens, and one for the sending of emails)
Bear in mind these js files must be in your backend code and imported into front end code before being able to use the backend functions.
let me know if all of these are worked out
also make sure the email address you are using with google oath is the same email you list as the sender address in the node mailer code in your backend config javascript file.
Also, you must import the npms into your backend js files using codes like the following below
import nodemailer from 'nodemailer';
import { google } from "googleapis";
import _ from 'lodash';
import {emailService as CONFIG_SERVICE} from 'backend/config.js';
import {auth2 as CONFIG_AUTH2} from 'backend/config.js';
@logan Hey Logan thanks for the quick reply! I believe I have accomplished all of the tasks you mention above with the exception of the number of emails I can send per day as a free user. I was unaware this method had a cap on it like that. If you can explain where I can see that info? I’m not sure if you mean on wix or google or nodemailer? Other than that I believe everything else is done. This link is to my post, it includes my code. It is almost a complete copy of @plomteuxquentin at this point as I’ve tried to figure it out. I obviously added my id and secret and refreshtoken but everything else is the same.
https://www.wix.com/corvid/forum/community-discussion/nodemailer-and-gmail-authorization