{"id":8,"date":"2019-09-09T11:43:21","date_gmt":"2019-09-09T10:43:21","guid":{"rendered":"https:\/\/eventshakuba.com\/?page_id=8"},"modified":"2026-02-07T21:00:57","modified_gmt":"2026-02-07T12:00:57","slug":"home","status":"publish","type":"page","link":"https:\/\/eventshakuba.com\/ja\/","title":{"rendered":"Home"},"content":{"rendered":"<!-- Events Hakuba Assistant \u2014 Homepage Embed Widget (WordPress-ready, single snippet) -->\n<style>\n  :root{\n    --eh-primary:#bd0904;\n    --eh-bg:#ffffff;\n    --eh-surface:#ffffff;\n    --eh-border:rgba(0,0,0,.10);\n    --eh-text:#111827;\n    --eh-muted:#6b7280;\n    --eh-soft:#f4f5f7;\n    --eh-shadow:0 18px 50px rgba(0,0,0,.12);\n    --eh-radius:16px;\n  }\n\n  #eh-embed *{ box-sizing:border-box; }\n  #eh-embed{\n    width:min(900px, 100%);\n    margin:0 auto;\n    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;\n    color:var(--eh-text);\n  }\n\n  #eh-embed-card{\n    border:1px solid var(--eh-border);\n    border-radius:var(--eh-radius);\n    background:var(--eh-surface);\n    box-shadow:var(--eh-shadow);\n    overflow:hidden;\n  }\n\n  \/* Top bar *\/\n  #eh-embed-top{\n    display:flex;\n    align-items:center;\n    gap:12px;\n    padding:14px 14px;\n    border-bottom:1px solid var(--eh-border);\n    background:linear-gradient(180deg, #fff 0%, #fafafa 100%);\n  }\n\n  #eh-embed-icon{\n    width:38px;height:38px;border-radius:12px;\n    background:var(--eh-primary);\n    display:flex;align-items:center;justify-content:center;\n    flex:0 0 auto;\n  }\n  #eh-embed-icon svg{ width:18px;height:18px;color:#fff; }\n\n  #eh-embed-titlewrap{ min-width:0; flex:1; }\n  #eh-embed-title{\n    font:600 14px\/1.15 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;\n    letter-spacing:.2px;\n    white-space:nowrap;\n    overflow:hidden;\n    text-overflow:ellipsis;\n  }\n  #eh-embed-badge{\n    margin-top:4px;\n    font:600 10px\/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;\n    color:var(--eh-primary);\n    letter-spacing:.6px;\n    text-transform:uppercase;\n  }\n\n  #eh-embed-sub{\n    padding:12px 14px 0 14px;\n    color:var(--eh-muted);\n    font-size:13px;\n    line-height:1.35;\n  }\n\n  \/* Chat area *\/\n  #eh-embed-log{\n    height:360px;\n    overflow:auto;\n    padding:14px;\n    background:var(--eh-soft);\n  }\n\n  .eh-row{ display:flex; margin:8px 0; }\n  .eh-row.user{ justify-content:flex-end; }\n  .eh-row.bot{ justify-content:flex-start; }\n\n  .eh-bubble-msg{\n    max-width:88%;\n    padding:10px 12px;\n    border-radius:14px;\n    border:1px solid var(--eh-border);\n    background:#fff;\n    color:var(--eh-text);\n    font-size:13px;\n    line-height:1.35;\n    white-space:pre-wrap;\n    word-break:break-word;\n  }\n  .eh-row.user .eh-bubble-msg{\n    background:var(--eh-primary);\n    color:#fff;\n    border-color:rgba(255,255,255,.18);\n  }\n\n  \/* Composer *\/\n  #eh-embed-form{\n    display:flex;\n    gap:8px;\n    padding:12px 14px 14px 14px;\n    border-top:1px solid var(--eh-border);\n    background:#fff;\n  }\n  #eh-embed-input{\n    flex:1;\n    border:1px solid var(--eh-border);\n    border-radius:12px;\n    padding:11px 12px;\n    outline:none;\n    font-size:13px;\n    color:var(--eh-text);\n    background:#fff;\n  }\n  #eh-embed-input:focus{\n    border-color:rgba(189,9,4,.35);\n    box-shadow:0 0 0 3px rgba(189,9,4,.10);\n  }\n  #eh-embed-send{\n    border:none;\n    background:var(--eh-primary);\n    color:#fff;\n    border-radius:12px;\n    padding:11px 16px;\n    cursor:pointer;\n    font-weight:600;\n    white-space:nowrap;\n  }\n  #eh-embed-send:disabled{ opacity:.6; cursor:not-allowed; }\n\n  \/* Typing indicator *\/\n  .eh-typing{\n    display:inline-flex;\n    align-items:center;\n    gap:6px;\n  }\n  .eh-dots{\n    display:inline-flex;\n    align-items:center;\n    gap:4px;\n  }\n  .eh-dot{\n    width:6px;height:6px;border-radius:999px;\n    background:#9ca3af;\n    animation:eh-bounce 1.1s infinite ease-in-out;\n  }\n  .eh-dot:nth-child(2){ animation-delay:.15s; }\n  .eh-dot:nth-child(3){ animation-delay:.30s; }\n  @keyframes eh-bounce{\n    0%, 80%, 100% { transform:translateY(0); opacity:.55; }\n    40% { transform:translateY(-4px); opacity:1; }\n  }\n\n  \/* Mobile *\/\n  @media (max-width:520px){\n    #eh-embed-log{ height:320px; }\n    #eh-embed-send{ padding:11px 14px; }\n  }\n<\/style>\n\n<div id=\"eh-embed\" aria-live=\"polite\">\n  <div id=\"eh-embed-card\">\n    <div id=\"eh-embed-top\">\n      <div id=\"eh-embed-icon\" aria-hidden=\"true\">\n        <svg viewbox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M12 18.25a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5Z\" fill=\"currentColor\"\/>\n          <path d=\"M12 3.25c-2.9 0-5.25 1.88-5.25 4.6 0 .41.34.75.75.75h.7c.41 0 .75-.34.75-.75 0-1.45 1.34-2.35 3.05-2.35 1.6 0 2.95.78 2.95 2.07 0 1.05-.6 1.62-1.66 2.22l-.53.3c-1.5.86-2.26 1.75-2.26 3.58v.43c0 .41.34.75.75.75h.72c.41 0 .75-.34.75-.75v-.33c0-1.08.33-1.56 1.45-2.22l.62-.36c1.47-.86 2.92-1.96 2.92-4.25 0-2.7-2.33-4.5-5.16-4.5Z\" fill=\"currentColor\"\/>\n        <\/svg>\n      <\/div>\n\n      <div id=\"eh-embed-titlewrap\">\n        <div id=\"eh-embed-title\">Events Hakuba Assistant<\/div>\n        <div id=\"eh-embed-badge\">BETA TESTING<\/div>\n      <\/div>\n    <\/div>\n\n    <div id=\"eh-embed-sub\">\n      Ask a Hakuba travel question and get practical options + links.\n    <\/div>\n\n    <div id=\"eh-embed-log\"><\/div>\n\n    <form id=\"eh-embed-form\" autocomplete=\"off\" action=\"\">\n      <input id=\"eh-embed-input\" placeholder=\"Ask a Hakuba travel question\u2026\" \/>\n      <button id=\"eh-embed-send\" type=\"submit\">Send<\/button>\n    <input type=\"hidden\" name=\"trp-form-language\" value=\"ja\"\/><\/form>\n  <\/div>\n<\/div>\n\n<script>\n  \/\/ ====== CONFIG ======\n  const EH_WEBHOOK_URL = \"https:\/\/n8n.thefifthbusiness.io\/webhook\/ed5e4ace-9196-4af2-bde0-17d8650f659a\/chat\";\n\n  \/\/ ====== SESSION (stable across page loads) ======\n  const EH_SESSION_KEY = \"eh_session_id_v1\";\n  const ehGetSessionId = () => {\n    let sid = localStorage.getItem(EH_SESSION_KEY);\n    if (!sid) {\n      sid = (window.crypto && crypto.randomUUID)\n        ? crypto.randomUUID()\n        : (\"sid_\" + Date.now() + \"_\" + Math.random().toString(16).slice(2));\n      localStorage.setItem(EH_SESSION_KEY, sid);\n    }\n    return sid;\n  };\n\n  \/\/ ====== DOM ======\n  const ehLog = document.getElementById(\"eh-embed-log\");\n  const ehForm = document.getElementById(\"eh-embed-form\");\n  const ehInput = document.getElementById(\"eh-embed-input\");\n  const ehSend = document.getElementById(\"eh-embed-send\");\n\n  \/\/ ====== STATE ======\n  const EH_HISTORY_KEY = \"eh_embed_chat_history_v1\";\n  let ehTypingEl = null;\n  let ehInFlight = false;\n\n  const ehScrollToBottom = () => { ehLog.scrollTop = ehLog.scrollHeight; };\n\n  const ehMakeRow = (role, text, opts = {}) => {\n    const row = document.createElement(\"div\");\n    row.className = `eh-row ${role === \"You\" ? \"user\" : \"bot\"}`;\n\n    const bubble = document.createElement(\"div\");\n    bubble.className = \"eh-bubble-msg\";\n\n    if (opts.html) bubble.innerHTML = opts.html;\n    else bubble.textContent = text ?? \"\";\n\n    row.appendChild(bubble);\n    ehLog.appendChild(row);\n    ehScrollToBottom();\n    return row;\n  };\n\n  const ehSaveMsg = (role, text) => {\n    const cur = JSON.parse(localStorage.getItem(EH_HISTORY_KEY) || \"[]\");\n    cur.push({ role, text, ts: Date.now() });\n    localStorage.setItem(EH_HISTORY_KEY, JSON.stringify(cur.slice(-80)));\n  };\n\n  const ehAddMsg = (role, text) => {\n    ehMakeRow(role, text);\n    ehSaveMsg(role, text);\n  };\n\n  const ehSetTyping = (on) => {\n    if (on) {\n      if (ehTypingEl) return;\n      ehTypingEl = ehMakeRow(\"Bot\", null, {\n        html: `<span class=\"eh-typing\">Typing<span class=\"eh-dots\"><span class=\"eh-dot\"><\/span><span class=\"eh-dot\"><\/span><span class=\"eh-dot\"><\/span><\/span><\/span>`\n      });\n    } else {\n      if (!ehTypingEl) return;\n      ehTypingEl.remove();\n      ehTypingEl = null;\n    }\n  };\n\n  const ehPickAnswer = (data) =>\n    data?.answer ??\n    data?.output ??\n    data?.response ??\n    data?.text ??\n    data?.message ??\n    (typeof data === \"string\" ? data : \"\");\n\n  \/\/ ====== INIT: restore or greet ======\n  try {\n    const hist = JSON.parse(localStorage.getItem(EH_HISTORY_KEY) || \"[]\");\n    if (Array.isArray(hist) && hist.length) {\n      hist.forEach((m) => ehMakeRow(m.role, m.text));\n    } else {\n      ehAddMsg(\"Bot\", \"Hi \u2014 I\u2019m the Events Hakuba Assistant (beta). Ask a Hakuba travel question and I\u2019ll reply with practical options + links.\");\n    }\n  } catch {\n    ehAddMsg(\"Bot\", \"Hi \u2014 I\u2019m the Events Hakuba Assistant (beta). Ask a Hakuba travel question and I\u2019ll reply with practical options + links.\");\n  }\n\n  \/\/ ====== SEND ======\n  ehForm.addEventListener(\"submit\", async (e) => {\n    e.preventDefault();\n    const msg = ehInput.value.trim();\n    if (!msg || ehInFlight) return;\n\n    ehInFlight = true;\n    ehSend.disabled = true;\n\n    ehInput.value = \"\";\n    ehAddMsg(\"You\", msg);\n    ehSetTyping(true);\n\n    const payload = {\n      chatInput: msg,\n      sessionId: ehGetSessionId(),\n      source: \"wordpress_homepage_embed\"\n    };\n\n    let data = null;\n    try {\n      const res = await fetch(EH_WEBHOOK_URL, {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application\/json\" },\n        body: JSON.stringify(payload)\n      });\n\n      const isJson = (res.headers.get(\"content-type\") || \"\").includes(\"application\/json\");\n      data = isJson ? await res.json() : await res.text();\n    } catch {\n      data = { answer: \"No response\" };\n    }\n\n    ehSetTyping(false);\n\n    const answer = ehPickAnswer(data) || \"No response\";\n    ehAddMsg(\"Bot\", answer);\n\n    ehInFlight = false;\n    ehSend.disabled = false;\n    ehInput.focus();\n  });\n<\/script>","protected":false},"excerpt":{"rendered":"<p>Events Hakuba Assistant BETA TESTING Ask a Hakuba travel question and get practical options + links. Send<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"categories":[],"class_list":["post-8","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/eventshakuba.com\/ja\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eventshakuba.com\/ja\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eventshakuba.com\/ja\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eventshakuba.com\/ja\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eventshakuba.com\/ja\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":4,"href":"https:\/\/eventshakuba.com\/ja\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":43615,"href":"https:\/\/eventshakuba.com\/ja\/wp-json\/wp\/v2\/pages\/8\/revisions\/43615"}],"wp:attachment":[{"href":"https:\/\/eventshakuba.com\/ja\/wp-json\/wp\/v2\/media?parent=8"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eventshakuba.com\/ja\/wp-json\/wp\/v2\/categories?post=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}