본문 바로가기
귀펀치토끼는 부서지지 않는다.
주소(D)
영웅은 공부 따원 안 한다네/뷰

[VUE] 카카오 상담톡 관리자모드에서 숨기기

<!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'));
});
완료
내 컴퓨터