Vue Integration

Vue 애플리케이션에서 MSAP Chat SDK를 사용하는 방법을 안내합니다.

Vue 3 (Composition API)

기본 사용

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';

const widget = ref(null);

onMounted(() => {
  if (window.MSAPChat) {
    widget.value = window.MSAPChat.init({
      applicationKey: import.meta.env.VITE_CHAT_KEY,
    });
  }
});

onUnmounted(() => {
  if (widget.value) {
    widget.value.destroy();
  }
});

const openChat = () => {
  widget.value?.open();
};
</script>

<template>
  <div>
    <h1>My App</h1>
    <button @click="openChat">고객 지원</button>
  </div>
</template>

Composable 만들기

composables/useMSAPChat.js:

import { onMounted, onUnmounted, ref } from 'vue';

export function useMSAPChat(applicationKey) {
  const widget = ref(null);

  onMounted(() => {
    if (window.MSAPChat && !widget.value) {
      widget.value = window.MSAPChat.init({
        applicationKey,
      });
    }
  });

  onUnmounted(() => {
    if (widget.value) {
      widget.value.destroy();
      widget.value = null;
    }
  });

  return widget;
}

사용:

<script setup>
import { useMSAPChat } from '@/composables/useMSAPChat';

const widget = useMSAPChat(import.meta.env.VITE_CHAT_KEY);
</script>

<template>
  <button @click="widget?.open()">채팅 열기</button>
</template>

Vue 2 (Options API)

<script>
export default {
  data() {
    return {
      widget: null,
    };
  },
  mounted() {
    if (window.MSAPChat) {
      this.widget = window.MSAPChat.init({
        applicationKey: process.env.VUE_APP_CHAT_KEY,
      });
    }
  },
  beforeDestroy() {
    if (this.widget) {
      this.widget.destroy();
    }
  },
  methods: {
    openChat() {
      this.widget?.open();
    },
    closeChat() {
      this.widget?.close();
    },
  },
};
</script>

<template>
  <div>
    <h1>My App</h1>
    <button @click="openChat">채팅 열기</button>
    <button @click="closeChat">채팅 닫기</button>
  </div>
</template>

Provide/Inject로 전역 관리

전역적으로 위젯을 관리하려면 Provide/Inject를 사용하세요.

App.vue

<script setup>
import { onMounted, onUnmounted, provide, ref } from 'vue';

const widget = ref(null);

onMounted(() => {
  if (window.MSAPChat) {
    widget.value = window.MSAPChat.init({
      applicationKey: import.meta.env.VITE_CHAT_KEY,
    });
  }
});

onUnmounted(() => {
  widget.value?.destroy();
});

provide('chat', widget);
</script>

<template>
  <RouterView />
</template>

컴포넌트에서 사용

<script setup>
import { inject } from 'vue';

const chat = inject('chat');
</script>

<template>
  <button @click="chat?.open()">고객 지원</button>
</template>

Nuxt.js에서 사용

Nuxt 3에서는 플러그인으로 만들어 사용합니다.

plugins/msap-chat.client.js

export default defineNuxtPlugin(() => {
  let widget = null;

  // 초기화
  if (process.client && window.MSAPChat) {
    widget = window.MSAPChat.init({
      applicationKey: useRuntimeConfig().public.chatKey,
    });
  }

  // 클린업
  if (process.client) {
    window.addEventListener('beforeunload', () => {
      widget?.destroy();
    });
  }

  return {
    provide: {
      chat: widget,
    },
  };
});

nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://sdk.turacocloud.com/msap-ai-chat.min.js',
          defer: true,
        },
      ],
    },
  },
  runtimeConfig: {
    public: {
      chatKey: process.env.NUXT_PUBLIC_CHAT_KEY,
    },
  },
});

컴포넌트에서 사용

<script setup>
const { $chat } = useNuxtApp();
</script>

<template>
  <button @click="$chat?.open()">고객 지원</button>
</template>

TypeScript 지원

먼저 설치 문서의 TypeScript 타입 안내에 따라 msap-ai-chat.d.ts를 src/types/msap-ai-chat.d.ts로 복사합니다.

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';

const widget = ref<MSAPChat.Instance | null>(null);

onMounted(() => {
  if (window.MSAPChat) {
    widget.value = window.MSAPChat.init({
      applicationKey: import.meta.env.VITE_CHAT_KEY,
    });
  }
});

onUnmounted(() => {
  widget.value?.destroy();
  widget.value = null;
});
</script>

<template>
  <button @click="widget?.open()">채팅 열기</button>
</template>

다음 단계

• Angular Integration - Angular에서 사용하기
• API Methods - API 메서드
• Examples - 라이브 예제