Hi,
Do you know how I can set a dynamic variable for an image in an automated triggered email template that is submitted through a Wix form? I want to send the image of a signature made in a Wix form, but I’m not sure how to send it. Should it be done through HTML? Because using an image directly doesn’t allow for variables.
This does seem to be a pending feature request
https://www.wix.com/velo/requested-feature/dynamic-image-for-triggered-email
Try the HTML solution, hopefully it solves it
Thank you!
I had tried the HTML but it doesn´t work.
It is not possible.
You can only attach the URL source of the image.
1 Like
It is possible with a little help of Javascript. You need to use the some backend wix libraries to send an email, and another to format an image to be sent.
backend/emailModule.web.js
import { webMethod, Permissions } from 'wix-web-module';
import { triggeredEmails } from 'wix-crm-backend';
import { mediaManager } from 'wix-media-backend';
/**
* Sends a triggered email to a specified member.
* @param {string} memberId - The ID of the member to receive the email.
* @param {object} variables - The variables to include in the triggered email.
* @param {string} wixImageUrl - the public url for the file upload
* @returns {Promise<object>} - The result of the email operation.
*/
export const sendTriggeredEmail = webMethod(
Permissions.Admin, // Adjust permissions as needed
async function (memberId, wixImageUrl, variables ) {
const emailId = 'yourEmailId'; // Replace with your actual Triggered Email ID
try {
const publicImgUrl = await mediaManager.getFileUrl(wixImageUrl);
// Add public url to variables
variables.wixImageUrl = publicImgUrl;
await triggeredEmails.emailMember(emailId, memberId, { variables });
return { success: true, message: 'Email sent successfully', variables: { variables} };
} catch (error) {
console.error('Failed to send email:', error);
throw new Error('Error sending email');
}
}
);
The preceding code calls a function that will retrieve an image that has been uploaded in a form.
In your frontend code (your page code), import the backend code that exposes the function. Add as many variables that you need to the variables.
import { sendTriggeredEmail } from "backend/emailModule.web";
$w.onReady(function () {
$w("#submitButton").onClick(async () => {
try {
// Validate and upload the file
const uploadButton = $w("#uploadButton");
const uploadedFiles = await uploadButton.uploadFiles();
if (uploadedFiles.length === 0) {
$w("#statusMessage").text = "No file uploaded. Please try again.";
$w("#statusMessage").show();
return;
}
const wixImageUrl = uploadedFiles[0].fileUrl;
// Use a static or dynamically fetched Member ID
const memberId = "memberID"; // who is the email sent to
const variables = {
productName: $w("#productName").text,
quantity: $w("#quantityInput").value,
};
// Call backend to send email
const result = await sendTriggeredEmail(memberId, wixImageUrl, variables);
$w("#statusMessage").text = result.message;
$w("#statusMessage").show();
} catch (error) {
console.error("Error submitting the form:", error);
$w("#statusMessage").text = "There was an error submitting the form!";
$w("#statusMessage").show();
}
});
});
In the TriggeredEmail Template edit:
- ensure that the variables in the code are created in the template.
- Create an html
tag and ensure that the source is ${wixImageUrl}
References:
Hope this helps!
What are you trying to accomplish by uploading an image?
Wix Triggered Emails does not allow us (yet) to pass an image variable to the Email Template to include a a dynamic image within the email template itself.
I accomplished sending an image through a triggered email. The image is capture from a upload file button.
As an image within the email?
As HTML?
As a URL text link that opens up in a window?
As a URL linked to a button that opens the image in a window?
As an attachment?
How did you add the image specifically?
Do you have a screenshot of what the image looks like within the triggered email template?
Ahh yes, HTML workaround.
It would be amazing if Wix just let us assign variables to images!!!
1 Like