What steps should I take to show my JavaScript WhatsApp icons once more?

I have been running my website for 3 years now. It was built using HTML, CSS, and JavaScript, and I created it myself. There used to be a WhatsApp icon at the bottom right corner of the site, but it disappeared about 6 months ago. I checked my code and there haven't been any changes. How can I get the WhatsApp icon to show up again?

Below is the snippet of code related to the WhatsApp icon:

 <script type="text/javascript">
    (function () {
        var options = {
        whatsapp: "+9000000000", // Contact Number
        call_to_action: "Hello, How may I help you?",
        position: "right", 
        };
        var proto = document.location.protocol, host = "whatshelp.io", url = proto + "//static." + host;
        var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
        s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
        var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
        })();
    
    //</script>
javascripthtmlcsswhatsapp

Answer №1

The website whatsupports.com is currently experiencing timeouts, leading to non-functional buttons.

According to waybackmachine.org, the site seems to have redirected to beckons.com at a certain point. However, trying to access 

https://static.beckons.com/widget-contact-button/js/init.js
results in a 404 error.

Through some online research, I stumbled upon this link: 

https://store.apps.com/whatsupport-live-chat.

The product description mentioned the following:

The ContactWidget tool (formerly WhatsHelp tool) allows direct communication with website visitors...

After changing the script to 

https://static.contactwidget.io/widget/bundle.js
, it worked like a charm!

I then modified your provided code for better readability as follows:

    <script type="text/javascript">
        (function () {
            var settings = {
                phone: "+19000000000", // Phone Number
                message_prompt: "Hello, How can I assist you?",
                location: "right", 
            };
            var protocol = document.location.protocol,
                domain = "contactwidget.io",
                link = protocol + "//static." + domain;
            var scriptTag = document.createElement('script');
            scriptTag.type = 'text/javascript';
            scriptTag.async = true;
            scriptTag.src = link + '/widget-send-button/js/init.js';
            scriptTag.onload = function () { CwWidgetSendButton.init(domain, protocol, settings); };
            
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(scriptTag, firstScriptTag);    
        })();
    </script>

Resulting in the image displayed below:

https://i.sstatic.net/Hdy64.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Field cannot have text selected or highlighted in Form

I've encountered a strange issue where I can't seem to select or highlight text in my form fields. Despite everything else appearing to work correctly, this particular problem has me stumped. I've tried on both Chrome and Safari, but highl ...

htmlcssforms

Adjusting Height of Left Menu in JQuery Panel

I am facing a challenge with my left menu, created using jQuery panel. Currently, the height of the menu is set to full screen. However, I would like to adjust it so that its height matches the content within (in this case, the ul attribute). Despite tryin ...

javascriptjqueryhtmlcss

Implementing delayed loading of Angular modules without relying on the route prefix

In my application, I am using lazy loading to load a module called lazy. The module is lazily loaded like this: { path:'lazy', loadChildren: './lazy/lazy.module#LazyModule' } Within the lazy module, there are several routes def ...

javascriptangulartypescript

Having issues with the `font-weight` property in Chrome?

There was a recent test conducted on a certain element that showed perfect functionality on Firefox but did not respond as expected on Chrome when using the font-weight: bold/bolder property. An attempt was made to identify any other CSS property that mig ...

cssgoogle-chromefonts

What is the most efficient way to manage form field errors using a single function in ReactJS?

I am facing a challenge with a form that requires users to answer three questions in order to register a new password. All fields must be filled out, and the user cannot submit the data to the server until all three questions are answered. My concern is h ...

javascriptreactjsmaterial-uireact-material-ui-form-validator

The functionality of remotely accessing autocomplete in Angucomplete Alt is currently not functioning properly

I'm currently experimenting with AngularJS autocomplete using Angucomplete Alt. I've copied the same code and running it on my local host, but unfortunately, no results are being displayed. When searching for the term 'ssss', an error ...

javascriptangularjs

Angular: directive modifying the value of a form control

I have implemented a feature to automatically transform the slug when the user inputs the name in a control field. This transformation includes changing spaces to hyphens (-) among other things. Although I created a directive for this purpose, it seems to ...

javascriptangulartypescriptangular-directive

Adjust text size within a div when hovering over it

I have a div with many elements inside. When the user hovers over the div, I want to increase the font size within that specific div. Here is the HTML code structure: <div class="col-sm-5 home-grid-2x"> <div class="home-grid-2 ...

htmlcss

The functionality of Javascript's scrollIntoView does not seem to be compatible when used in conjunction

I am currently facing an issue with my update panel that contains a grid view. Within the gridview, there are multiple links triggering a page load indicator using an update progress element. The problem arises when the data in the gridview is extensive an ...

javascriptasp.netupdatepanel

Just discovered a background change triggered by the time, but unable to replicate it

I find it odd that everything works perfectly fine with document.body.style.background, yet I can't seem to change the style of this particular div. Here is the code snippet: var container = document.getElementById("container"); var updateTime = fu ...

javascripthtmlcss

Updating user credits through the Model::factory() method is a common practice in my workflow

I need to update the UserCredits after a purchase. For example, if a user currently has 10 credits and purchases 10 more, I want to add the purchased credits to their existing total. The goal is to increment the current credit score with the new credits ...

phphtmlcsslaravel

Error: when trying to refresh TABLE DATA, an issue occurred with a stale element reference where the element is not connected to the

Apologies in advance for my poor grasp of the English language. I am working on a project where I need to continuously fetch row data from a table using driver.refresh() The first iteration works fine, and the data is retrieved for each row. However, when ...

pythonhtmlseleniumselenium-chromedriverstaleelementreferenceexception

The properties of JavaFX in the CSS file are not recognized by Eclipse, showing an error message as "unknown property"

After installing Eclipse and downloading the OpenJFX SDK, I encountered an issue where Eclipse marked all -fx- properties in the .css file as warnings with the message "unknown property". Surprisingly, my JavaFX projects still compiled and ran smoothly, ...

javacsseclipsejavafxefxclipse

Is there a way to prevent my cell from resizing during the initiation of a jQuery animate effect?

After coding a 2x2 DIV table, I encountered an issue where the left side of the cell appears when hovering over the right cell. However, the left cell is hidden when the mouse leaves the right cell, utilizing a jQuery animate effect. I'm facing a pro ...

jquerycss

Expanding Node Attributes in SigmaJs

I'm attempting to include additional information on nodes. I've imported JSON data to the graph in the following manner: $.getJSON... s = new sigma({ graph: json, settings: { enableHovering: false } The JS ...

javascriptsigma.js

What is preventing Node.js from executing my JavaScript code in the terminal?

https://i.sstatic.net/JJmg2.jpg I need help understanding why my JavaScript code isn't working properly. Can someone explain the Uncaught SyntaxError: Unexpected Identifier error message? ...

javascriptnode.jsvisual-studio-code

Allow entry fields and a submit button to become active once the form has been submitted on ASP.NET MVC 4

I want the update button to be activated after submitting the form. Take a look at my code: VIEW: @using (Html.BeginForm("ProcessTech", "Home", FormMethod.Post)) { @Html.TextBoxFor(m => m.techNo, new { @class = "form-control maintain-t ...

c#javascriptjqueryasp.netasp.net-mvc

Using Node.js await function results in an undefined response

One issue arises when a POST call is made to /login; the const user variable ends up being assigned as undefined even though getUser() consistently returns the expected value. Interestingly, the call console.log(getUser()); located at the end of the file e ...

javascriptnode.jsexpressasync-awaitundefined

Is there a way to create a blurred background effect while the popup is in use?

I prefer my popup to have a dark or blurred background when active. The popup itself should remain the same, with only the background being darkened. I would like a dark layer overlaying the entire page. This script should be compatible with any website wh ...

javascriptcss

Why is tr.myClass not functioning properly without the presence of >td? How can I determine the

In my HTML, I have a table as shown below: var selector = $("#searchResultsArea"); $.getJSON(url, null, function (data) { selector.empty(); var html = "<table id=\"tabRoom\" style=\"width: 950px; border:none\" class=&b ...

htmlcss