https://button.gcalls.co/25d3f60070e347d6b612b2e6b02fa4a3

1(function () {
2	const position = 'bottom-right';
3	let linkCSS = document.createElement('link');
4	linkCSS.setAttribute('rel', 'stylesheet');
5	linkCSS.setAttribute('type', 'text/css');
6	linkCSS.setAttribute('href', 'https://button.gcalls.co/css/click-to-call.css');
7
8	document.head.appendChild(linkCSS);
9
10	let callContainer = document.createElement("div");
11	callContainer.classList.add("smart-gcalls");
12	callContainer.classList.add(position);
13	callContainer.setAttribute('data-tooltip', 'Gọi để được tư vấn miễn phí');
14	<!-- document.body.appendChild(callContainer); -->
15
16	let btnCall = document.createElement("div");
17	btnCall.classList.add("btn-gcalls");
18	btnCall.setAttribute('style','background-image:url(https://gcalls.co/wp-content/uploads/2022/09/Thiết-kế-chưa-có-tên.png)');
19	callContainer.appendChild(btnCall);
20
21	<!-- Toggle Popup -->
22	btnCall.addEventListener('click', function () {
23		tooltipElement.classList.toggle("active-gcalls-toooltip");
24	});
25	let tooltipElement = document.createElement('span');
26	tooltipElement.classList.add('smart-gcalls-tooltip');
27	callContainer.appendChild(tooltipElement);
28
29	let tooltipHeader = document.createElement('p');
30	tooltipHeader.classList.add('tooltip-header');
31	tooltipHeader.innerText = 'Gọi Ngay'
32
33	let tooltipContent = document.createElement('p');
34	tooltipContent.classList.add('tooltip-content');
35	tooltipContent.innerText = 'Gọi để được tư vấn miễn phí'
36
37	<!-- Form input -->
38	let tooltipCallInput = document.createElement('div');
39	tooltipCallInput.classList.add('tooltip-call-input');
40	tooltipCallInput.innerHTML = '<label>Nhập số điện thoại của bạn</label>' +
41	'<input type="phone" id="gcalls-input-phone" placeholder="Phone number.."/>';
42	let gcallsValueStatus = document.createElement('span');
43	gcallsValueStatus.classList.add('gcalls-value-status');
44	gcallsValueStatus.innerText = 'Please enter the phone number';
45	gcallsValueStatus.style.display = 'none';
46	tooltipCallInput.appendChild(gcallsValueStatus);
47
48	<!-- Call button -->
49	let tooltipCallButton = document.createElement('div');
50	tooltipCallButton.classList.add('tooltip-call-button');
51	tooltipCallButton.innerHTML = '<button id="gcalls-call-button"><img src="https://button.gcalls.co/img/call.png"/></button>';
52
53	<!-- let callButton = document.getElementById("gcalls-call-button"); -->
54	tooltipCallButton.addEventListener('click', function () {
55		let pattern = /^[0-9]{8,14}$/;
56		let phone = document.getElementById("gcalls-input-phone").value;
57
58		if(pattern.test(phone)) {
59			gcallsValueStatus.style.display = 'none';
60			window.open(`https://button.gcalls.co/25d3f60070e347d6b612b2e6b02fa4a3/call?website=${window.location.hostname}&inputPhone=${phone}`);
61		}else {
62			gcallsValueStatus.style.display = 'block';
63		}
64	});
65
66	<!-- Footer -->
67	let tooltipCallFooter = document.createElement('div');
68	tooltipCallFooter.classList.add('tooltip-call-footer');
69	tooltipCallFooter.innerHTML = '<a href="https://gcalls.co" target="_blank" class="tooltip-footer-gcalls">'+
70		'<img src="https://button.gcalls.co/img/logo.png"/>'+
71		'<span> Powered by Gcalls</span>'+
72	'</a>'
73
74	tooltipElement.appendChild(tooltipHeader);
75	tooltipElement.appendChild(tooltipContent);
76	tooltipElement.appendChild(tooltipCallInput);
77	tooltipElement.appendChild(tooltipCallButton);
78	tooltipElement.appendChild(tooltipCallFooter);
79
80	setTimeout(() => {
81		document.body.appendChild(callContainer);
82	},2000)
83})();