function whatsappButton({
brandName = '',
buttonName = '',
brandSubtitleText = '',
welcomeMessage = '',
phoneNumber = '',
brandImageUrl = '',
callToAction = '',
buttonSize = 'large',
buttonMargin = 'false',
buttonIconSize = 22,
}) {
let returnVal = `
`;
// Replace templated strings
returnVal = returnVal.replaceAll('{{buttonName}}', buttonName);
returnVal = returnVal.replaceAll('{{brandImageUrl}}', brandImageUrl);
returnVal = returnVal.replaceAll('{{brandName}}', brandName);
returnVal = returnVal.replaceAll('{{brandSubtitleText}}', brandSubtitleText);
returnVal = returnVal.replaceAll('{{buttonSize}}', buttonSize);
returnVal = returnVal.replaceAll('{{callToAction}}', callToAction);
returnVal = returnVal.replaceAll('{{phoneNumber}}', phoneNumber);
// Replace \n with %0a so the new lines will be reflected in the whatsapp message textarea
returnVal = returnVal.replaceAll(
'text={{welcomeMessage}}',
`text=${welcomeMessage.replace(/(?:\r\n|\r|\n)/g, '%0a')}`,
);
returnVal = returnVal.replaceAll('{{welcomeMessage}}', welcomeMessage);
returnVal = returnVal.replaceAll('{{buttonIconSize}}', buttonIconSize)
if (buttonMargin === 'true') {
returnVal = returnVal.replaceAll('{{buttonMargin}}', 'wa-cta-button-label-margin')
returnVal = returnVal.replaceAll('{{buttonPadding}}', 'wa-button-size-with-words')
}
if (buttonMargin === 'false') {
returnVal = returnVal.replaceAll('{{buttonMargin}}', '')
returnVal = returnVal.replaceAll('{{buttonPadding}}', '')
}
// insert markup into DOM
document.querySelector('body').insertAdjacentHTML('beforeend', returnVal);
// default close widget
const chatBox = document.querySelector('#wa-chat-window');
chatBox.style.display = 'none';
// onClick for open and close whatsapp chat window
document.getElementById('wa-cta-button').onclick = () => {
const chatBox = document.querySelector('#wa-chat-window');
const currentState = window.getComputedStyle(chatBox).display;
if (currentState !== 'none') {
return (chatBox.style.display = 'none');
}
return (chatBox.style.display = 'grid');
};
// whatsapp close button
document.querySelector('#wa-close-btn').onclick = () => {
const chatBox = document.querySelector('#wa-chat-window');
chatBox.style.display = 'none';
};
}
