<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
.float_kakao {
position: fixed;
right: 50px;
bottom: 50px;
z-index: 999;
cursor: pointer;
}
</style>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="modal"></div>
<div id="app"></div>
<!-- built files will be auto injected -->
<div class="float_kakao">
<div
id="kakao-talk-channel-chat-button"
data-channel-public-id="_rvxfzG"
data-title="consult"
data-size="small"
data-color="yellow"
data-shape="pc"
data-support-multiple-densities="true"
></div>
</div>
</body>
</html>
index.html에서 script부분에 있던 코드를 관리자모드가 아닌 페이지의 레이아웃에 onMounted(() => {에 그대로 삽입했다.
onMounted(() => {
window.kakaoAsyncInit = function () {
// eslint-disable-next-line no-undef
Kakao.Channel.createChatButton({ container: '#kakao-talk-channel-chat-button' });
};
(function (d, s, id) {
let js; const
fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
// eslint-disable-next-line prefer-const
js = d.createElement(s); js.id = id;
js.src = 'https://t1.kakaocdn.net/kakao_js_sdk/2.2.0/kakao.channel.min.js';
js.integrity = 'xxxxxxxxxxxxxxxxxxxxxxxx';
js.crossOrigin = 'anonymous';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'kakao-js-sdk'));
});