Dynamic Email Button - Help Request

Ask the community
,
1

Hey y’all. Hoping you can help me troubleshoot. I’ve got a button on dynamic page named ‘contactEmail’. The button’s label is connected via the dynamic dataset. The dynamic page pulls data from my ‘Projects’ collection, which has a reference field ‘customer’ that pulls data from the ‘Team’ collection. I’ve written the following code to dynamically set the onClick function to direct the user to the customers email. I was able to execute the same function successfully with a phone number, but for some reason I can’t get the email to work.

I did try formatting the email with and without the ‘<>’. The Velo Reference article has it written as such, so I followed this example:

mailto:<address>@<someplace.com>?subject=<subject>

The console log confirms that the button onClick event works, it is pulling the customers email from the collection correctly, and it is formatting the email and emailtoLink as intended. Any input on what may be wrong?

$w.onReady(function () {
    // Add event handler for the onClick event of the contactEmail element
    $w('#contactEmail').onClick(() => {
        console.log('Email button clicked');

        // Get the current item from the dynamic dataset (Projects collection)
        const currentItem = $w('#dynamicDataset').getCurrentItem();

        // Check if the current item exists and has a customer with an email address
        if (currentItem && currentItem.customer) {
            // Get the ID of the customer from the current project
            const customerId = currentItem.customer._id;

            // Query the Team collection to get the customer's email address
            wixData.query('Team')
                .eq('_id', customerId)
                .find()
                .then(customerResult => {
                    const customer = customerResult.items[0]; // Assuming there's only one customer for the given ID
                    const email = customer.email;

                    // Extract sender text and domain name from the email address
                    const atIndex = email.indexOf('@');
                    const senderText = email.substring(0, atIndex);
                    const domainName = email.substring(atIndex + 1);

                    // Construct the formatted email
                    const formattedEmail = `${senderText}>@<${domainName}`;
                    console.log('Formatted email:', formattedEmail);

                    // Construct the mailto link with subject enclosed in '<' and '>'
                    const mailtoLink = `mailto:<${formattedEmail}>?subject=<Hello>`;

                    console.log('Email link:', mailtoLink);

                    // Direct the user's window to the mailto link
                    wixLocationFrontend.to(mailtoLink);
                })
                .catch(err => {
                    console.error('Error fetching customer:', err);
                });
        } else {
            console.error('Customer information or email address not available for this project.');
        }
    });
});
2

This doesn’t look like a valid email. ${senderText}@${domainName} should work. As should just passing customer.email directly without parsing it.

Same here, no < / >. I think those are just as examples. I’ll ask the docs team to clarify.

I know you mentioned you tried this though. Are you getting an error message? That might be helpful to figure out what’s going wrong.

Side note that if the subject contained spaces or other special characters you’l also need to format it with encodeURIComponent() - JavaScript | MDN first

3

I did try just passing the customer.email as well as just passing the email string. I figured the chevrons (<>) were not needed but was kinda just troubleshooting all options.

No errors in the code editor or my console logs. It’s almost like what would happen if the event handler was disconnected from an _click function, except I’m using the .onClick method so that shouldn’t be an issue. In other words, no errors, it just isn’t opening the native mail application.

In my case I’m using a macbook pro, so I assume it should open the Mail app. The telephone method I implemented successfully opens Facetime when I click the phone number from my MacBook, or tries to place a call when clicked on my iPhone. I must be missing something.

4

Interesting. What browser are you using? If telephone and other links work I’d assume it’s a browser issue. Have you tried other browsers?