How to Turn the Native Wix Chat (App Market) into ChatGPT with OpenAI

Hey there, web enthusiasts! If you're as excited as we are about leveraging AI in web design, you're in for a treat. Today, we're diving into the magic of turning a regular Wix chat feature into an impressive AI-driven chatbot using the power of OpenAI's GPT models. Curious about guiding your website visitors with engaging, AI-generated conversations? Let’s dive into it.

Setting the Stage: Your Initial Setup

Before we weave our spell, let's ensure that we have all our tools ready. You won't be starting from scratch—we've got some building blocks ready for you.

1. Backend Files Configuration: We've crafted an `openAI.jsw` module. Here, it makes a basic call to the Chat GPT 3.5 turbo module, retrieving responses and returning the message part.

2. The Chatbot Module: This module is your chatbot's core. It fetches visitor messages, adds a system instruction, slices it down to the last six messages, and sends it to OpenAI for an AI-generated reply.

3. API Key Setup: This is securely snuggled inside the developer tools, aptly named within the "secret manager."

Also, grab the documentation for the Wix chat backend in the Velo reference and the "on message sent" event specifics. Having these at hand streamlines our journey.

Installing the Wix Chat App

Let’s get that Wix Chat running on your site.

1. Head to the App Market and type in "chat." Add the free Wix chat app to your site. You'll now see a chat icon on your page that visitors will interact with.

2. Time to tweak! Customize how it's displayed, whether it opens automatically, or how it's designed. Although these are optional tweaks, they add a polished touch.

Building the Frontend Experience

This part gets exciting! We’re placing our code onto the master page, ensuring that the chatbot engages visitors across all your website pages.

1. Implement the `on message sent` event to start interaction. A channel ID is only birthed upon receiving the first visitor message—vital for our flow.

2. Create a logging function to record conversations. It will plot the trajectory between "user," "system," and "assistant."

3. Integrate the AI with `generate bot answer` to garner responses. Our AI returns will be elegantly guided by a simple yet effective system message: "Be nice."

Syncing with Wix Chat Backend

Transitioning to the backend:

1. Add a new web module, say, `WixChat.jsw`.

2. Leverage Wix's send message feature, allowing your replies to feel they're directly from your business rather than an AI entity.

3. Maintain structure with async/await for readability and synchronization, harmonizing the front-end with backend communications.

The Grand Test: Bringing AI to Life

With your setup complete, test your creation by typing queries into your chat. Witness the magic unfold as the AI processes and replies, mimicking conversational nuances as if they were coming from a real human helper.

Fine-Tuning the Chat Experience

To achieve a seamless UX, follow these:

- Enable automatic chat opening or bubble notifications.

- Integrate pre-chat options for collecting emails if that's beneficial for your business.

- Set up automations so your chatbot can initiate the conversation.

Conclusion: Your AI-Driven Chat Journey Begins

Congrats, you've successfully crafted an AI chatbot experience on Wix! This dynamic tool will now enhance visitor engagement. But our journey doesn't stop here.

At NewForm, we’re all about honing your design skills, helping you find opportunities in the marketplace, and connecting you with industry leaders. We offer monthly web design challenges with cash prizes, weekly skill-building events, and exclusive monthly guest sessions featuring top professionals in web design. Here, you get to learn directly from the best, access invaluable resources, and build cool things online.

So, if you’re ready to take your skills to new heights and join a community of like-minded creatives, now’s the time! Without further ado, let’s dive into your next project—and don’t forget to join NewForm afterward for more amazing opportunities!

Together, let’s craft the web of tomorrow!

Cheers,

The NewForm Team