V-Talk ウィジェット 埋め込みガイド

    <!-- V-Talk Widget -->
    <script type="module" src="https://v-talk-dev-demonstration.web.app/assets/widget.js" defer></script>
    <div id="v-talk-widget" data-user-id="YOUR_USER_ID"></div>
    
<?php wp_footer(); ?>
</body>
</html>

// V-Talk Widget
function add_vtalk_widget() {
    ?>
    <script type="module" src="https://v-talk-dev-demonstration.web.app/assets/widget.js" defer></script>
    <div id="v-talk-widget" data-user-id="YOUR_USER_ID"></div>
    <?php
}
add_action('wp_footer', 'add_vtalk_widget');

import { useEffect } from 'react';

function VTalkWidget() {
  useEffect(() => {
    // スクリプトが既に存在するか確認
    if (document.querySelector('script[src*="v-talk"]')) {
      return;
    }

    // スクリプトを作成して追加
    const script = document.createElement('script');
    script.type = 'module';
    script.src = 'https://v-talk-dev-demonstration.web.app/assets/widget.js';
    script.defer = true;
    document.body.appendChild(script);

    // コンテナを作成して追加
    if (!document.getElementById('v-talk-widget')) {
      const widgetDiv = document.createElement('div');
      widgetDiv.id = 'v-talk-widget';
      widgetDiv.setAttribute('data-user-id', 'YOUR_USER_ID');
      widgetDiv.setAttribute('data-mobile-bottom', '90px');
      document.body.appendChild(widgetDiv);
    }

    // クリーンアップ関数（コンポーネントがアンマウントされた時に実行）
    return () => {
      const widgetDiv = document.getElementById('v-talk-widget');
      if (widgetDiv) widgetDiv.remove();
      
      const triggerBtn = document.getElementById('v-talk-trigger-btn');
      if (triggerBtn) triggerBtn.remove();
      
      const allWidgetElements = document.querySelectorAll('[id^="v-talk"]');
      allWidgetElements.forEach(el => el.remove());
      
      const scriptEl = document.querySelector('script[src*="v-talk"]');
      if (scriptEl) scriptEl.remove();
    };
  }, []);

  return null;
}

export default VTalkWidget;

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

onMounted(() => {
  if (document.querySelector('script[src*="v-talk"]')) {
    return;
  }

  const script = document.createElement('script');
  script.type = 'module';
  script.src = 'https://v-talk-dev-demonstration.web.app/assets/widget.js';
  script.defer = true;
  document.body.appendChild(script);

  if (!document.getElementById('v-talk-widget')) {
    const widgetDiv = document.createElement('div');
    widgetDiv.id = 'v-talk-widget';
    widgetDiv.setAttribute('data-user-id', 'YOUR_USER_ID');
    widgetDiv.setAttribute('data-mobile-bottom', '90px');
    document.body.appendChild(widgetDiv);
  }
});

onUnmounted(() => {
  const elements = document.querySelectorAll('[id^="v-talk"]');
  elements.forEach(el => el.remove());
  
  const script = document.querySelector('script[src*="v-talk"]');
  if (script) script.remove();
});
</script>