HOW TO OPEN MAIL APPLICATION, BY CLICCKING ON A EMAIL LINK-BUTTON ON A NEWS LETTER

Paolo Bianchini

unread,

Oct 26, 2017, 10:24:08 AM10/26/17

to Google Web Designer beta

Hi, help me to solve this please, it is driving me mad:
i am creating a news letter on Google Web Designer, and on the footer there are the contacts and an e mail button-link.

I want that, when people click on that link, it opens the e mail application (the one each people have on hes computer - i have Mail on Mac osx), to write to the e mail link selected.
I attach the example how i want it to be.

Thank you.

Example.jpg

Kent Myers

unread,

Oct 26, 2017, 12:34:48 PM10/26/17

to Google Web Designer beta

One way to handle this is using a mailto link in Code view. For example, in Web Designer I open a New Blank File > Others > HTML. Create a taparea containing some text and in Code view add an <a> tag like this:

<gwd-taparea id="gwd-taparea_1" class="gwd-taparea-1u73">

<p class="gwd-p-s2dc">Send me an email</p>

</gwd-taparea>

</a>

</body>

When previewed and clicked on a Macbook will open your default mail app.

Hope that helps,

Kent

Google Web Designer team

Message has been deleted

Paolo Bianchini

unread,

Oct 30, 2017, 5:13:55 AM10/30/17

to Google Web Designer beta

Hi, you send me the code example tu make the buttun open the mail application:

<gwd-taparea id="gwd-taparea_1" class="gwd-taparea-1u73">

<p class="gwd-p-s2dc">Send me an email</p>

</gwd-taparea>

</a>

</body>

I attach a screenshot of my file code view, can you please complete it with the script screen u gave me (copied above)?

Thankyou very much!!!!

Schermata 2017-10-30 alle 10.06.57.png

Kent Myers

unread,

Oct 30, 2017, 11:14:06 AM10/30/17

to Google Web Designer beta

Hi Paolo,

First you want to change your taparea so its wrapping all your other page content (instead of following the content). Then wrap the taparea in the mailto anchor <a...

Attached screenshot with the general idea. If you're still having problems copy & paste your code here in the forum.

Paolo Bianchini

unread,

Nov 6, 2017, 4:26:02 AM11/6/17

to Google Web Designer beta

Hi, now it works but te tap area is now the all image, the all stage.... and not just the green button with the email address..there is something wrong.

I put xxx on mail address for privacy.

I paste the code, can you please fisx it to me?

Thank you.

<body>

<gwd-genericad id="gwd-ad">

<gwd-taparea id="gwd-taparea_1" class="gwd-taparea-1u73">

<p class="gwd-p-s2dc">Send me an email</p>

</gwd-taparea>

<gwd-taparea id="gwd-taparea_1" class="gwd-taparea-3lqp"></gwd-taparea>

</a>

</div>

</gwd-genericad>

(function() {

var gwdAd = document.getElementById('gwd-ad');

Kent Myers

unread,

Nov 6, 2017, 1:38:23 PM11/6/17

to Google Web Designer beta

Hi Paolo, This code works on my test page so just the blue "send me an email" text will do that. The only change is the position of the </a> tag.

<gwd-genericad id="gwd-ad">

<gwd-taparea id="gwd-taparea_1" class="gwd-taparea-1u73">

<p class="gwd-p-s2dc">Send me an email</p>

</gwd-taparea>

</a>

<gwd-taparea id="gwd-taparea_1" class="gwd-taparea-3lqp"></gwd-taparea>

</div>

</gwd-genericad>

Paolo Bianchini

unread,

Nov 10, 2017, 8:19:53 AM11/10/17

to Google Web Designer beta

Hi, if i move the script <a> mailto ecc...., as you suggest in your code, - I already tried before-, cliccking on the button Tap area it doesnt work.

Hereattached tehere is my script as u suggested, but it doesent work this way.

Yhank you

Schermata 2017-11-10 alle 14.14.22.png

Paolo Bianchini

unread,

Nov 10, 2017, 8:42:51 AM11/10/17

to Google Web Designer beta

HERE THE IS THE ENTIRE CODE:

<!DOCTYPE html>

<html>

<head>

.gwd-lightbox {

overflow: hidden;

}

</style>

p {

margin: 0px;

}

h1 {

margin: 0px;

}

h2 {

margin: 0px;

}

h3 {

margin: 0px;

}

</style>

html, body {

width: 100%;

height: 100%;

margin: 0px;

}

.gwd-page-container {

position: relative;

width: 100%;

height: 100%;

}

.gwd-page-content {

background-color: transparent;

transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);

transform-style: preserve-3d;

position: absolute;

}

.gwd-page-wrapper {

background-color: rgb(255, 255, 255);

position: absolute;

transform: translateZ(0px);

}

.gwd-page-size {

width: 600px;

height: 2700px;

}

.gwd-video-11np {

position: absolute;

width: 600px;

height: 335px;

transform-origin: 100px 167.5px 0px;

left: 1px;

top: 659px;

}

.gwd-new-class-1bz4 {}

.gwd-video-5e0b {

position: absolute;

width: 599px;

height: 334px;

transform-origin: 299.5px 167px 0px;

left: 1px;

top: 1201px;

}

.gwd-img-6j9n {

position: absolute;

width: 601px;

height: 336px;

left: 0px;

top: 1200px;

}

.gwd-img-1eqj {

position: absolute;

width: 600px;

height: 2700px;

left: 1px;

top: 0px;

}

.gwd-taparea-3lqp {

position: absolute;

left: 192px;

top: 2430px;

width: 213px;

height: 40px;

transform-origin: 106.5px 20px 0px;

}

</style><script data-source="googbase_min.js" data-version="4" data-exports-type="googbase" src="googbase_min.js"></script><script data-source="gwd_webcomponents_min.js" data-version="5" data-exports-type="gwd_webcomponents" src="gwd_webcomponents_min.js"></script>

<script

data-source="gwdpage_min.js" data-version="8" data-exports-type="gwd-page" src="gwdpage_min.js"></script><script data-source="gwdpagedeck_min.js" data-version="9" data-exports-type="gwd-pagedeck" src="gwdpagedeck_min.js"></script><script data-source="gwdgenericad_min.js" data-version="4" data-exports-type="gwd-genericad" src="gwdgenericad_min.js"></script>

<script

data-source="gwdimage_min.js" data-version="9" data-exports-type="gwd-image" src="gwdimage_min.js"></script><script data-source="gwdvideo_min.js" data-version="8" data-exports-type="gwd-video" src="gwdvideo_min.js"></script>

window.gwd = window.gwd || {};

gwd.auto_Gwd_VIDEO_BACKELPlaying = function(event) {

// GWD Predefined Function

gwd.actions.gwdVideo.play('gwd-VIDEO_BACKEL');

};

gwd.auto_Gwd_VIDEO_BACKELPause = function(event) {

// GWD Predefined Function

gwd.actions.gwdVideo.pause('gwd-VIDEO_BACKEL');

};

gwd.auto_Gwd_SCHERMATA_BLACKClick = function(event) {

// GWD Predefined Function

gwd.actions.gwdVideo.play('gwd-VIDEO_BIONICHE_BLACK');

};

gwd.auto_Gwd_SCHERMATA_BLACKClick1 = function(event) {

// GWD Predefined Function

gwd.actions.events.setInlineStyle('gwd-SCHERMATA_BLACK', 'transition: all 0s ease-out; ');

};

gwd.SCHERMATA_BLACK = function(event) {

hidden

};

</script>

// Codice di assistenza per eventi gestiti in Google Web Designer

// Questo blocco di script viene generato automaticamente. Non modificarlo.

gwd.actions.events.registerEventHandlers = function(event) {

gwd.actions.events.addHandler('gwd-VIDEO_BACKEL', 'playing', gwd.auto_Gwd_VIDEO_BACKELPlaying, false);

gwd.actions.events.addHandler('gwd-VIDEO_BACKEL', 'pause', gwd.auto_Gwd_VIDEO_BACKELPause, false);

gwd.actions.events.addHandler('gwd-SCHERMATA_BLACK', 'click', gwd.auto_Gwd_SCHERMATA_BLACKClick, false);

gwd.actions.events.addHandler('gwd-SCHERMATA_BLACK', 'click', gwd.auto_Gwd_SCHERMATA_BLACKClick1, false);

gwd.actions.events.addHandler('gwd-SCHERMATA_BLACK', 'click', gwd.SCHERMATA_BLACK, false);

};

gwd.actions.events.deregisterEventHandlers = function(event) {

gwd.actions.events.removeHandler('gwd-VIDEO_BACKEL', 'playing', gwd.auto_Gwd_VIDEO_BACKELPlaying, false);

gwd.actions.events.removeHandler('gwd-VIDEO_BACKEL', 'pause', gwd.auto_Gwd_VIDEO_BACKELPause, false);

gwd.actions.events.removeHandler('gwd-SCHERMATA_BLACK', 'click', gwd.auto_Gwd_SCHERMATA_BLACKClick, false);

gwd.actions.events.removeHandler('gwd-SCHERMATA_BLACK', 'click', gwd.auto_Gwd_SCHERMATA_BLACKClick1, false);

gwd.actions.events.removeHandler('gwd-SCHERMATA_BLACK', 'click', gwd.SCHERMATA_BLACK, false);

};

document.addEventListener("DOMContentLoaded", gwd.actions.events.registerEventHandlers);

document.addEventListener("unload", gwd.actions.events.deregisterEventHandlers);

</script><script data-source="gwdtaparea_min.js" data-version="4" data-exports-type="gwd-taparea" src="gwdtaparea_min.js"></script>

</head>

<body>

<gwd-genericad id="gwd-ad">

<gwd-taparea id="gwd-taparea_1" class="gwd-taparea-1u73">

<p class="gwd-p-s2dc">Send me an email</p>

</gwd-taparea>

<gwd-taparea id="gwd-taparea_1" class="gwd-taparea-3lqp"></gwd-taparea>

</a>

</div>

</gwd-genericad>

(function() {

var gwdAd = document.getElementById('gwd-ad');

/**

* Handles the DOMContentLoaded event. The DOMContentLoaded event is

* fired when the document has been completely loaded and parsed.

*/

function handleDomContentLoaded(event) {

}

/**

* Handles the WebComponentsReady event. This event is fired when all

* custom elements have been registered and upgraded.

*/

function handleWebComponentsReady(event) {

// Start the Ad lifecycle.

setTimeout(function() {

gwdAd.initAd();

}, 0);

}

/**

* Handles the event that is dispatched after the Ad has been

* initialized and before the default page of the Ad is shown.

*/

function handleAdInitialized(event) {}

window.addEventListener('DOMContentLoaded',

handleDomContentLoaded, false);

window.addEventListener('WebComponentsReady',

handleWebComponentsReady, false);

window.addEventListener('adinitialized',

handleAdInitialized, false);

})();

</script>

</body>

</html>

Kent Myers

unread,

Nov 10, 2017, 1:04:35 PM11/10/17

to Google Web Designer beta

I see the problem, and reworked the mailto link with a more standard approach in Web Designer which seems to be working better in your page environment. You can download the reworked file and update your email address in the events panel: https://drive.google.com/file/d/1DeocTge0Txg_myQK4oZo4RND31vzuSuc/view?usp=sharing

Reply all

Reply to author

Forward