Is it possible to add an input field on a webpage that triggers a conversation in the built-in AI ch

Developer Support APIs & Integrations
, ,
1

Hello everyone,

I’m exploring ways to enhance user interaction on our website and was wondering if it’s possible to add an input field where visitors can type a question, which then automatically starts a conversation in the built-in AI chat when they click “Ask a Question.”

The goal is to create a more seamless experience by allowing users to ask questions directly from the webpage and receive answers from the AI chat without additional clicks. I’ve been able to get the chat window to pop up, but I haven’t found a way to send the user’s question into the chat automatically.

Has anyone implemented a similar feature, or does HubSpot offer functionality to support this?

Thanks in advance for any insights!

2

Hey @Stegemann :waving_hand: Great question!

A few clarifying questions to help the community:

  • Are you currently using JavaScript to trigger the chat widget?
  • How are you capturing the input from the field?
  • Do you have any custom scripts in place to interact with the chat?

These details can help our community members know how to support you.

Talk soon! — Jaycee

3

Hi again!

Thank you for your questions!

Yes, I’m currently using JavaScript in my test example to trigger the chat widget. My setup captures the input from a basic input field and then attempts to send it into the chat when a button is clicked. However, I don’t have any special scripts in place specifically for interacting with the chat beyond the code snippet below.

Here’s a simplified version of what I’m trying:

<div style="position: relative; width: 100%; max-width: 600px;">
 <input id="questionInput" style="width: 100%; padding: 10px; box-sizing: border-box;" type="text" placeholder="Write your question here...">
 <button onclick="sendToHubSpotChat();" style="position: absolute; right: 10px; top: 10px;">Open Chat</button>
</div>

<script>
 function sendToHubSpotChat() {
 const question = document.getElementById("questionInput").value;
 if (window.HubSpotConversations && window.HubSpotConversations.widget) {
 window.HubSpotConversations.widget.open();
 setTimeout(() => {
 const chatFrame = document.querySelector('iframe[id*="hubspot-messages-iframe"]');
 if (chatFrame) {
 chatFrame.contentWindow.postMessage({ type: 'setMessageText', messageText: question }, '*');
 }
 }, 1000);
 }
 }
</script>

The goal is to both open the chat and send the question as a message. While the chat opens fine, the question doesn’t populate in the chat.

I’d appreciate any insights on what adjustments might be necessary for this to work, or if there’s a better approach with different techniques.

Thanks again for the support!