ホームページに埋め込む

<!-- 伊藤次郎 AIチャットウィジェット -->
<style>
  @import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700&display=swap');
  #jiro-widget-btn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #1d4ed8;
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(29,78,216,0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    transition: transform 0.2s, box-shadow 0.2s;
    font-family: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'rounded-mplus-1c', sans-serif;
    font-weight: 700;
    line-height: 1.2;
  }
  #jiro-widget-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 28px rgba(29,78,216,0.5);
  }
  #jiro-widget-btn .btn-label-ai {
    font-size: 11px;
    letter-spacing: 0.05em;
    opacity: 0.85;
  }
  #jiro-widget-btn .btn-label-name {
    font-size: 15px;
    letter-spacing: 0.1em;
  }
  #jiro-widget-frame {
    position: fixed;
    bottom: 104px;
    right: 28px;
    width: 380px;
    height: 580px;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    border: none;
    z-index: 9999;
    display: none;
    overflow: hidden;
  }
  @media (max-width: 480px) {
    #jiro-widget-frame {
      width: calc(100vw - 24px);
      height: calc(100dvh - 120px);
      right: 12px;
      bottom: 88px;
    }
  }
</style>

<button id="jiro-widget-btn" onclick="toggleJiroChat()" title="次郎に相談する">
  <span class="btn-label-ai">Ai</span>
  <span class="btn-label-name">次郎</span>
</button>

<iframe
  id="jiro-widget-frame"
  src="https://jiro-chat-lab.base44.app/embed"
  title="伊藤次郎 AIチャット"
></iframe>

<script>
  function toggleJiroChat() {
    var frame = document.getElementById('jiro-widget-frame');
    var btn = document.getElementById('jiro-widget-btn');
    if (frame.style.display === 'block') {
      frame.style.display = 'none';
      btn.innerHTML = '<span class="btn-label-ai">Ai</span><span class="btn-label-name">次郎</span>';
    } else {
      frame.style.display = 'block';
      btn.innerHTML = '✕';
    }
  }
</script>

<iframe
  src="https://jiro-chat-lab.base44.app/embed"
  width="100%"
  height="600"
  style="border:none; border-radius:16px; box-shadow:0 4px 24px rgba(0,0,0,0.12);"
  title="伊藤次郎 AIチャット"
></iframe>