Build an AI Conversational Chatbot for Your Website with VectorShift

Build an AI-powered conversational chatbot for your website with Vector Shift. Learn how to send images, validate emails, store data in Google Sheets, and create interactive chatbot flows.

8 мая 2025 г.

party-gif

Discover how to build an AI-powered conversational website chatbot with VectorShift's advanced features. Learn to seamlessly integrate image uploads, email validation, and Google Sheets integration to create a dynamic and engaging user experience.

Introducing Vector Shift Chatbot

Welcome to the Vector Shift chatbot! This advanced conversational interface allows you to interact with our services in a natural and intuitive way.

With the new conversational nodes feature, we've made it easy to build complex chatbot flows that can handle a variety of user inputs and provide tailored responses. In this example, we'll walk through a more advanced use case that demonstrates some of the key capabilities:

  • Sending an image to introduce the chatbot
  • Capturing the user's name and email, and validating the email format
  • Securely storing the user's information in a Google Sheet
  • Transitioning to a traditional Q&A chatbot flow, with the ability to loop back and ask additional questions
  • Incorporating a button node to allow the user to indicate if they have more questions

By leveraging these powerful features, you can create engaging and dynamic chatbot experiences that seamlessly guide users through your services and content. Let's dive in and see how it all comes together!

Building a Conversational Chatbot with Nodes

In this advanced example, we will build a conversational chatbot that demonstrates the use of various nodes in Vector Shift. The chatbot will:

  1. Send an image of the Vector Shift homepage.
  2. Ask the user for their name and email.
  3. Validate the email address and store the user's information in a Google Sheet if the email is valid.
  4. Provide a traditional question-answering chatbot functionality, allowing the user to ask questions about Vector Shift.
  5. Incorporate a button node to give the user the option to ask additional questions or end the conversation.

The key features demonstrated in this example include:

  • Talk Nodes: Used to send information to the chatbot, such as messages, images, cards, and carousels.
  • Listen Nodes: Used to capture user responses and store them in variables.
  • Condition Nodes: Used to validate the user's email and route the conversation accordingly.
  • Dependencies: Used to ensure that the Google Sheet is only updated if the email is valid.
  • Knowledge Base Integration: Used to provide answers to user questions about Vector Shift.
  • Button Nodes: Used to give the user the option to ask additional questions or end the conversation.

By the end of this example, you will have a comprehensive understanding of how to build a conversational chatbot using the various nodes and features available in Vector Shift.

Validating Email Input

To validate the user's email input, we use an OpenAI Language Model (LM) node. The LM node is configured to validate the email and output "yes" if the email is valid, or "no" if the email is invalid.

We then use a Condition node to branch the pipeline based on the LM output. If the email is valid (LM output is "yes"), we proceed to store the name and email in a Google Sheet. If the email is invalid (LM output is "no"), we ask the user to enter a valid email by looping back to the "What is your email?" message node.

The Google Sheet node is set to be dependent on the "yes" path of the Condition node, ensuring that the data is only stored if the email is valid.

Storing User Data in Google Sheets

To store the user's name and email in a Google Sheet, we first need to validate the email address to ensure it is valid. We can use an OpenAI language model to perform this validation.

If the email is valid, we add a new row to the Google Sheet with the user's name and email. To ensure that the row is only added if the email is valid, we use a dependency on the "path zero" condition, which is only triggered when the email is valid.

Here's the step-by-step process:

  1. Use a "Condition" node to check if the email is valid. If the email is valid, it will follow "path zero", otherwise it will follow "path one".
  2. In "path zero", add a "Google Sheet" node and configure it to add a new row to the spreadsheet, using the user's name and email as the data.
  3. Set a dependency on the "Google Sheet" node, connecting it to "path zero". This ensures that the row is only added if the email is valid.
  4. If the email is not valid, the pipeline will follow "path one", where we can display a message asking the user to enter a valid email.

By following this process, we can ensure that the user's data is only stored in the Google Sheet if the email is valid, preventing any invalid data from being added to the spreadsheet.

Incorporating a Knowledge Base for Q&A

In this advanced example, we will incorporate a knowledge base to enable the chatbot to answer user questions about Vector Shift. Here's how it works:

  1. We start by adding an LM (Language Model) node to the workflow, which will be responsible for answering the user's questions based on the context provided.
  2. We then add a Knowledge Base node, which will contain information about Vector Shift that the chatbot can use to respond to user queries.
  3. After the user provides their name and email (which are validated and stored in a Google Sheet), the chatbot will prompt the user to ask any additional questions.
  4. When the user asks a question, the chatbot will pass the question to the LM node, which will then query the Knowledge Base to generate a relevant response.
  5. The response from the LM node is then sent back to the user through a Message node.
  6. Finally, the chatbot will present the user with two buttons: "Yes" and "No", allowing them to indicate whether they have any additional questions. If they select "Yes", the conversation will loop back to the "How can I help?" prompt, allowing them to ask another question. If they select "No", the chatbot will end the conversation with a "Thank you, have a nice day" message.

This advanced example demonstrates how you can leverage a knowledge base and language model to create a more robust and conversational chatbot experience for your users.

Providing Interactive Buttons for User Engagement

In this advanced example, we incorporate the button node to enhance user engagement in the conversational flow. The button node allows us to present the user with a set of options, enabling them to select their preferred choice and navigate the conversation accordingly.

After validating the user's email and storing the information in a Google Sheet, we introduce a new step in the conversation. We use the button node to ask the user if they have any additional questions, providing them with two options: "Yes" and "No".

If the user selects "Yes", the conversation loops back to the "How can I help today?" prompt, allowing them to ask another question. The cyclic input for this loop is set to "What is your question?", ensuring a smooth transition.

On the other hand, if the user selects "No", the conversation ends with a farewell message, "Thank you, have a nice day."

This implementation demonstrates the versatility of the button node in creating interactive and engaging chatbot experiences. By offering users a choice, we enhance their involvement and provide a more personalized conversational flow.

Conclusion

The advanced conversational nodes example showcases the powerful capabilities of the Vector Shift platform. By leveraging various node types, such as message, image, condition, and button nodes, the chatbot is able to provide a seamless and interactive user experience.

The key highlights of this example include:

  1. Image Sharing: The chatbot starts the conversation by sending an image of the Vector Shift homepage, providing a visual introduction to the service.

  2. User Information Capture: The chatbot prompts the user for their name and email, capturing this data for further processing.

  3. Email Validation: The chatbot utilizes an OpenAI language model to validate the user's email address, ensuring only valid emails are stored.

  4. Google Sheets Integration: When a valid email is provided, the user's name and email are automatically stored in a Google Sheet, enabling easy data management.

  5. Conversational Loops: The chatbot incorporates conditional logic and cyclic inputs to handle invalid email scenarios, guiding the user to provide a valid email.

  6. Knowledge-based Responses: The chatbot leverages a knowledge base to provide relevant information in response to user questions about Vector Shift.

  7. Button-driven Interactions: The chatbot introduces a button node, allowing the user to easily indicate whether they have additional questions, streamlining the conversational flow.

This comprehensive example demonstrates the versatility and power of the Vector Shift platform, enabling the creation of advanced, interactive, and data-driven chatbots that can seamlessly engage with users.

Часто задаваемые вопросы