WhatsApp button doesn't work, about:blank is opened instead

WhatsApp button doesn’t work, about:blank#blocked is opened instead.

Why?

Update: I get about:blank#blocked in two browsers: Chrome and Edge, so this is some kind of a standardization issue.

Adding either or both target="_blank" and rel="noopener noreferrer" to the a tag didn’t help.

document.body.insertAdjacentHTML('beforeend', `
	<aside class="cbwtphone_wrapper">
		<img class="cbwtphone_icon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/WhatsApp.svg/1024px-WhatsApp.svg.png"></img>
		<a class="cbwtphone_link" href="https://wa.me:NUMBER">
			<span class="cbwtphone_text">WhatsApp call</span>
		</a>
	</aside>
`)

newStyle = document.createElement("style");
newStyle.type = "text/css";
newStyle.innerHTML +=`
    .cbwtphone_wrapper {
        display: flex;
	align-items: center;
	justify-content: center;
        position: fixed;
        right: 0;
	bottom: 0;
        left: 0;
        z-index: 2147483647;
        text-decoration: none;
        font-size: 120%;
        font-weight: bold;
	background: linear-gradient(-160deg,#2494db 0%,#0d7ab8 78.66%) /* #149714; */
    }

    .cbwtphone_link {
    	display: inline; /* Fix for Drupal */
    	text-decoration: none; /* Fixes continuing line problem */
    }
    .cbwtphone_icon {
   	display: inline; /* Fix for Drupal */
        width: 50px;
        height: 50px;
	vertical-align: middle;
    }
    .cbwtphone_text {
    	display: inline; /* Fix for Drupal */
    	vertical-align: middle;
	color: #fff;
    }
`;
document.head.appendChild(newStyle);

Not… entirely sure why you’re doing this in Javascript and not just… putting it into the page itself…
The browser is probably reacting to you injecting a link via javascript and treating it as a threat.

Finally, a reply.

I thank you dearly.

I just try not to touch the content management system’s (Drupal’s) template files, but I will check for a way to do this from Drupal itself.

Even if I load it from backend it doesn’t help, I still have the same problem.

<aside class="cbwtphone_wrapper" style="display: flex; align-items: center; justify-content: center; position: fixed; right: 0; bottom: 0; left: 0; z-index: 2147483647; text-decoration: none; font-size: 120%; font-weight: bold; background: linear-gradient(-160deg,#2494db 0%,#0d7ab8 78.66%)">
	<a href="https://wa.me:NUMBER" style="display: inline; text-decoration: none;">
		<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/WhatsApp.svg/1024px-WhatsApp.svg.png" style="display: inline; width: 50px; height: 50px; vertical-align: middle;"></img>
		<span style="display: inline; vertical-align: middle; color: #fff;">WhatsApp Call</span>
	</a>
</aside>

I assume you have inserted your number in the correct format there instead of the word NUMBER?

Hello PaulOB.
Yes I did.

Ok, I was sure you had but was just checking :slight_smile:

Sorry I can’t offer any other insight as have never had to implement this.

isnt it supposed to be /number, and not :number ?

: would be indicating a port number. Browsers might get twitchy about odd port numbers being used…

2 Likes

You have found the problem !

That was the problem !

After changing : to / the link worked !

:green_heart:

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.