Hey team, quick ask for help 👋 I’m integrating Botpress into HubSpot and I’m stuck specifically on loading and rendering past conversations. Context: • Users authenticate via HubSpot and are correctly identified in Botpress • Session persistence works across devices • I can retrieve past conversations via the Botpress API Blocker: HubSpot does not support React, so this needs to be done in plain JavaScript + HTML. I’m unsure of the correct pattern to: • Load historical messages • Render them in the chat UI before/alongside a new session • Do this in a way Botpress expects (without breaking context) If anyone has: • Implemented conversation history replay in Botpress • Done this without React • Guidance on supported or recommended approaches I’d really appreciate a direct pointer or example. Happy to share anything if helpful. Thanks 🙌

Here is what im working on https://cdn.discordapp.com/attachments/1455585891354546359/1455588027953971230/Screenshot_2025-12-30_at_9.45.33.png?ex=6955457d&is=6953f3fd&hm=c06f7f54932768cece7c6338cc6e9de3226a245613183973d0c8b81aa1be55f1&

` // ==== CONFIG ==== // Botpress cloud endpoint & your bot ID const BOT_ID = ""; const BP_API = "https://api.botpress.cloud/v1"; // Personal Access Token with

admin

scope (keep secret!) const TOKEN = ""; // ================= // Helper to call Botpress Admin API async function bpFetch(path) { const res = await fetch(

${BP_API}${path}

, { headers: { Authorization:

Bearer ${TOKEN}

} }); if (!res.ok) throw new Error(

BP API error: ${res.status}

); return res.json(); } // Get the HubSpot contact ID that Botpress knows about // When the HubSpot integration is installed, the contact ID is stored // as a user tag

hubspot:contactId

. We can read it via the Botpress API. async function getHubSpotContactId() { const me = await bpFetch("/admin/users/me"); return me.tags?.["hubspot:contactId"]; } // Fetch conversation history for that contact async function loadHistory(contactId) { // Botpress conversation ID is derived from the user ID. // Use the “Get conversations” endpoint and filter by user ID. const convs = await bpFetch(

/admin/conversations?userId=${contactId}

); if (!convs.conversations?.length) return []; // Pick the latest conversation (or iterate all) const convId = convs.conversations[0].id; const msgs = await bpFetch(

/admin/conversations/${convId}/messages

); return msgs.messages || []; } // Render messages in the container function renderMessages(messages) { const container = document.getElementById("bp-chat-history"); container.innerHTML = ""; // clear messages.forEach(m => { const div = document.createElement("div"); div.style.marginBottom = "6px"; const author = m.from === "bot" ? "Bot" : "You"; const bg = m.from === "bot" ? "#e6f7ff" : "#f0f0f0"; div.style.background = bg; div.style.padding = "6px 10px"; div.style.borderRadius = "4px"; div.textContent = `${author}: ${m.payload?.text || "[non‑text]"}`; container.appendChild(div); }); // scroll to bottom container.scrollTop = container.scrollHeight; } // Initialise the standard Webchat widget (still plain JS) function initWebchat() { // Load the Webchat script from Botpress CDN const script = document.createElement("script"); script.src = "https://cdn.botpress.cloud/webchat/v0/webchat.js"; script.onload = () => { window.botpressWebChat.init({ // required params botId: BOT_ID, // you can hide the built‑in header if you prefer hideHeader: false, // container where the live chat will be rendered container: "#bp-webchat" }); }; document.body.appendChild(script); } // ==== Run the flow ==== (async () => { try { const contactId = await getHubSpotContactId(); if (!contactId) throw new Error("HubSpot contact ID not found."); const history = await loadHistory(contactId); renderMessages(history); // finally start live chat so new messages appear initWebchat(); } catch (e) { console.error(e); document.getElementById("bp-chat-history").innerText = "❗️ Unable to load chat history."; } })(); `

This is great, thanks so much!