"https://chat.whatsapp.com/Go2plnPm8k5AZjf9e5wY8Y&text="
link yapısı bu şekilde oluyor
"https://chat.whatsapp.com/Go2plnPm8k5AZjf9e5wY8Y"
bu şekilde olması gerekiyor aşagıya java kodlarını ve script kodlarını paylaşıyorum
<script>
var url = 'https://grafik404.com/shopifyWidget.js';
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = url;
var options = {
"enabled":true,
"chatButtonSetting":{
"backgroundColor":"#283d5b",
"ctaText":"WHATSAPP GRUBU",
"borderRadius":"25",
"marginLeft":"0",
"marginBottom":"50",
"marginRight":"50",
"position":"left"
},
"brandSetting":{
"brandName":"GRAFİK 404!",
"brandSubTitle":"Grafik Yardımlaşma Grubu",
"brandImg":"https://grafik404.com/resim/galeri_MTY0M_2.png",
"welcomeText":"Grafik Yardımlaşma\nGrubuna Katıl.",
"messageText":"",
"backgroundColor":"#0a5f54",
"ctaText":"Sohbet Başlat",
"borderRadius":"25",
"autoShow":false,
"phoneNumber":""
}
};
s.onload = function() {
CreateWhatsappChatWidget(options);
};
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
</script>function CreateWhatsappChatWidget(option = {
brandSetting: {
autoShow: true,
backgroundColor: "#0a6114",
borderRadius: "25",
brandImg: "https://cdn.clare.ai/wati/images/WATI_logo_square_2.png",
brandImgData: null,
brandName: "WATI",
brandSubTitle: "Typically replies within a day",
ctaText: "Start Chat",
phoneNumber: "85252859384"
},
chatButtonSetting: {
backgroundColor: "#4dc247",
borderRadius: "25",
ctaText: "",
marginLeft: "0",
marginRight: "20",
marginBottom: "20",
position: "right"
},
enabled: false
}) {
if (option.enabled == false){
return;
}
if(!option.chatButtonSetting.position){
option.chatButtonSetting.position = "right";
option.chatButtonSetting.marginBottom = "20";
option.chatButtonSetting.marginLeft = "0";
option.chatButtonSetting.marginRight = "20";
}
var css = document.createElement("STYLE");
if(window.jQuery){
initWidget();
}else{
var script = document.createElement("SCRIPT");
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
script.type = 'text/javascript';
script.onload = function() {
initWidget();
};
document.getElementsByTagName("head")[0].appendChild(script);
}
function initWidget(){
if (option.brandSetting.messageText) {
option.brandSetting.messageText = option.brandSetting.messageText.replaceAll("{{page_link}}", encodeURIComponent(window.location.href));
option.brandSetting.messageText = option.brandSetting.messageText.replaceAll("__page_link__", encodeURIComponent(window.location.href));
option.brandSetting.messageText = option.brandSetting.messageText.replaceAll("{{page_title}}", window.document.title);
option.brandSetting.messageText = option.brandSetting.messageText.replaceAll("__page_title__", window.document.title);
option.brandSetting.messageText = option.brandSetting.messageText.replaceAll("\n", "%0A");
}
jQuery('body').append(`<div id="whatsapp_chat_widget">
<div id="wa-widget-send-button">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="wa-messenger-svg-whatsapp wh-svg-icon"><path d=" M19.11 17.205c-.372 0-1.088 1.39-1.518 1.39a.63.63 0 0 1-.315-.1c-.802-.402-1.504-.817-2.163-1.447-.545-.516-1.146-1.29-1.46-1.963a.426.426 0 0 1-.073-.215c0-.33.99-.945.99-1.49 0-.143-.73-2.09-.832-2.335-.143-.372-.214-.487-.6-.487-.187 0-.36-.043-.53-.043-.302 0-.53.115-.746.315-.688.645-1.032 1.318-1.06 2.264v.114c-.015.99.472 1.977 1.017 2.78 1.23 1.82 2.506 3.41 4.554 4.34.616.287 2.035.888 2.722.888.817 0 2.15-.515 2.478-1.318.13-.33.244-.73.244-1.088 0-.058 0-.144-.03-.215-.1-.172-2.434-1.39-2.678-1.39zm-2.908 7.593c-1.747 0-3.48-.53-4.942-1.49L7.793 24.41l1.132-3.337a8.955 8.955 0 0 1-1.72-5.272c0-4.955 4.04-8.995 8.997-8.995S25.2 10.845 25.2 15.8c0 4.958-4.04 8.998-8.998 8.998zm0-19.798c-5.96 0-10.8 4.842-10.8 10.8 0 1.964.53 3.898 1.546 5.574L5 27.176l5.974-1.92a10.807 10.807 0 0 0 16.03-9.455c0-5.958-4.842-10.8-10.802-10.8z" fill-rule="evenodd"></path></svg>
<div style="color: white; font-size: 18px">${option.chatButtonSetting.ctaText}</div>
</div>
</div>`);
jQuery('#whatsapp_chat_widget').append(`
<div class='wa-chat-box'>
<div class='wa-chat-box-header'>
<img class='wa-chat-box-brand' onError='this.src= "https://cdn.clare.ai/wati/images/WATI_logo_square_2.png";' src='${option.brandSetting.brandImg}'/>
<div class='wa-chat-box-brand-text'>
<div class='wa-chat-box-brand-name'>${option.brandSetting.brandName}</div>
<div class='wa-chat-box-brand-subtitle'>${option.brandSetting.brandSubTitle}</div>
</div>
<div class="wa-chat-bubble-close-btn"><img style="display: table-row" src="https://cdn.shopify.com/s/files/1/0070/3666/5911/files/Vector.png?574"></div>
</div>
<div class='wa-chat-box-content'>
<div class='wa-chat-box-content-chat'>
<div class='wa-chat-box-content-chat-brand'>${option.brandSetting.brandName}</div>
<div class='wa-chat-box-content-chat-welcome'>${option.brandSetting.welcomeText.replace(/\n/g, "<br/>")}</div>
</div>
</div>
<div class='wa-chat-box-send'>
<a role="button" target="_blank" href="https://chat.whatsapp.com/Go2plnPm8k5AZjf9e5wY8Y" title="WhatsApp" class="wa-chat-box-content-send-btn"><svg width="20" height="20" viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" class="wa-chat-box-content-send-btn-icon"></svg>
</a>
<div class='wa-chat-box-poweredby'>⚡ by <a href="https://wati.io/?utm_source=shopify&utm_medium=chat_widget&utm_campaign=shopify_widget" target="_blank" style="color: #006eff6e;">wati.io</a></div>
</div>
</div>
`);
if(option.brandSetting.autoShow){
jQuery(".wa-chat-box").css("display", "block");
}else{
jQuery(".wa-chat-box").css("display", "none");
}
jQuery("#whatsapp_chat_widget").on('click', '.wa-chat-bubble-close-btn', function(){
jQuery(".wa-chat-box").css("display", "none");
})
jQuery("#whatsapp_chat_widget").on('click', '#wa-widget-send-button', function(){
jQuery(".wa-chat-box").css("display", "block");
})
}
var styles = `
#whatsapp_chat_widget{
display: ${option.enabled?"block":"none"}
}
.wa-chat-box-content-send-btn-text{
margin-left: 8px;
margin-right: 8px;
z-index: 1;
color: rgb(255, 255, 255);
}
.wa-chat-box-content-send-btn-icon{
width: 16px;
height: 16px;
fill: rgb(255, 255, 255);
z-index: 1;
flex: 0 0 16px;
}
.wa-chat-box-content-send-btn{
text-decoration: none;
color: rgb(255, 255, 255)!important;
font-size: 15px;
font-weight: 700;
line-height: 20px;
cursor: pointer;
position: relative;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
-webkit-appearance: none;
padding: 8px 12px;
border-radius: ${option.brandSetting.borderRadius}px;
border-width: initial;
border-style: none;
border-color: initial;
border-image: initial;
background-color: ${option.chatButtonSetting.backgroundColor}!important;
margin: 20px;
overflow: hidden;
}
.wa-chat-box-send{
background-color:white;
}
.wa-chat-box-content-chat-brand{
font-size: 13px;
font-weight: 700;
line-height: 18px;
color: rgba(0, 0, 0, 0.4);
}
.wa-chat-box-content-chat-welcome{
font-size: 14px;
line-height: 19px;
margin-top: 4px;
color: rgb(17, 17, 17);
}
.wa-chat-box-content-chat{
background-color: white;
display: inline-block;
margin: 20px;
padding: 10px;
border-radius: 10px;
}
.wa-chat-box-content{
background: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png');
}
.wa-chat-bubble-close-btn{
cursor: pointer;
position: absolute;
right: 20px;
top: 20px;
}
.wa-chat-box-brand-text{
margin-left: 20px;
}
.wa-chat-box-brand-name{
font-size: 16px;
font-weight: 700;
line-height: 20px;
}
.wa-chat-box-brand-subtitle{
font-size: 13px;
line-height: 18px;
margin-top: 4px;
}
.wa-chat-box-header{
height: 100px;
max-height: 100px;
min-height: 100px;
background-color: ${option.brandSetting.backgroundColor};
color: white;
border-radius: 10px 10px 0px 0px;
display:flex;
align-items: center;
}
.wa-chat-box-brand{
margin-left: 20px;
width: 50px;
height: 50px;
border-radius: 25px;
box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
}
.wa-chat-box{
background-color:white;
z-index: 16000160 !important;
margin-bottom: 60px;
width: 360px;
position: fixed !important;
bottom: ${option.chatButtonSetting.marginBottom}px !important;
${option.chatButtonSetting.position == "left" ? "left : "+option.chatButtonSetting.marginLeft+"px" : "right : "+option.chatButtonSetting.marginRight+"px"};
border-radius: 10px;
box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
font: 400 normal 15px/1.3 -apple-system, BlinkMacSystemFont, Roboto, Open Sans, Helvetica Neue, sans-serif;
}
#wa-widget-send-button {
margin: 0 0 ${option.chatButtonSetting.marginBottom}px 0 !important;
padding-left: ${option.chatButtonSetting.ctaText?"15px":"0px"};
padding-right: ${option.chatButtonSetting.ctaText?"15px":"0px"};
position: fixed !important;
z-index: 16000160 !important;
bottom: 0 !important;
text-align: center !important;
height: 50px;
min-width: 50px;
border-radius: ${option.chatButtonSetting.borderRadius}px;
visibility: visible;
transition: none !important;
background-color: ${option.chatButtonSetting.backgroundColor};
box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
${option.chatButtonSetting.position == "left" ? "left : "+option.chatButtonSetting.marginLeft+"px" : "right : "+option.chatButtonSetting.marginRight+"px"};
cursor: pointer;
display: flex;
align-items: center;
justify-content:center;
}
.wa-messenger-svg-whatsapp{
fill: white;
width: 41px;
height: 50px;
stroke: none;
}
.wa-chat-box-poweredby{
text-align: center;
font: 400 normal 15px/1.3 -apple-system, BlinkMacSystemFont, Roboto, Open Sans, Helvetica Neue, sans-serif;
margin-bottom: 15px;
margin-top: -10px;
font-style: italic;
font-size: 12px;
color: lightgray;
}
@media only screen and (max-width: 600px) {
.wa-chat-box
{
width: auto;
position: fixed !important;
right: 20px!important;
left: 20px!important;
}
}
`
var styleSheet = document.createElement("style")
styleSheet.type = "text/css"
styleSheet.innerText = styles
document.getElementsByTagName("head")[0].appendChild(styleSheet);
} 
