I'm implementing a feature, which is using the navigator.share API.
While the navigator share is available, I only want the text property, so I only specified this one in the shareData.
On IOS only, the problem is, when I click on the google or outlook app, the email body is well populated with the text, but the email object is also populated with the text property when it should be empty.
While clicking on the native IOS email app, the object is empty as desired.
Here is a link for testing on a real device: https://codepen.io/MarinFa/pen/QWRgjpy
I've tried :
Nothing is working.
Any clue on what I should do ?
Hi Marine,
Try with this code
const shareData = {
title: "Share Example",
text: "Your text here"
};
// Check user agent for Outlook or Gmail
if (/Google|Outlook/.test(navigator.userAgent)) {
// Customize the text for email
shareData.text = "Custom message for Google/Outlook apps";
}
navigator.share(shareData)
.then(() => console.log('Shared successfully'))
.catch((error) => console.log('Sharing failed', error));
from my understanding this code will work if you are facing the issue then please explain more your question
Hi @Marine Fayolle
Please use this hope it works for you.
// Function to detect if the user is on Gmail or Outlook
function isEmailClient() {
const userAgent = navigator.userAgent;
return userAgent.includes("Google") || userAgent.includes("Outlook");
// Prepare share data
function getShareData() {
const defaultTitle = "Share Example";
let message = "Your text here";
if (isEmailClient()) {
message = "Custom message for Google/Outlook apps";
return {
title: defaultTitle,
text: message
// Try to share the content
async function shareContent() {
if (navigator.share) {
try {
const shareData = getShareData();
await navigator.share(shareData);
console.log("Shared successfully");
} catch (error) {
console.error("Sharing failed", error);
} else {
console.warn("Web Share API not supported in this browser.");
// Trigger the share action
shareContent();