Select Page

Original & Concise Bullet Point Briefs

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

AI Chatbot Creation Tutorial: Learn How to Use Wix and Open AI

  • Etan is showing how to create an AI driven Wix chatbot using native Wix chat and Open AI
  • The chatbot can respond with AI generated content
  • He has already set up the open AI JS W module, a basic call to the chat GPT 3.5 turbo module, a chatbot module which takes messages from the front end and attaches a system instruction, and an API key in the developer tools
  • The main focus of this tutorial is implementation of techniques using the Wix Chat app and Velo reference documentation
  • He shows how to install the Wix Chat app, build out the front end, use an on message sent event listener and console.log message object, create a messages variable to send text back to an AI endpoint, and use Wix’s answer bot feature.

Chatbot Creation Streamlined with OpenAI Integration and Web Module

  • A message log function has been created, which generates an object and stores it in a messages array
  • The structure of the object includes a role and content parameter, both passed as parameters
  • Roles are determined by OpenAI documentation, with three types: system (instructing AI how to behave), user (user input to chatbot), and assistant (responses generated back from AI)
  • A generate bot answer function is imported, taking the messages array as a parameter, returning an answer from OpenAI API
  • The response is logged into the message log as an assistant role with the answer text as its content
  • Finally, a web module is added to interact with Wix chat backend’s send message function, sending message text and channel ID with send as visitor set to false.

Unlock a New Level of Customer Interaction with a Custom Wix Chatbot

  • In this video, it was demonstrated how to set up a Wix Chatbot that responds to user queries
  • The user has the ability to customize the settings, such as what message appears when users visit and what information is collected from them
  • The user also has control over design elements, like header and text for their chatbot
  • Finally, it was shown how to activate automated chat form responses.

Student Demonstrates Change With Music

  • The student is going to demonstrate a change by heading over to an incognito tab
  • The demonstration will be done with the help of music.

Original & Concise Bullet Point Briefs

With VidCatter’s AI technology, you can get original briefs in easy-to-read bullet points within seconds. Our platform is also highly customizable, making it perfect for students, executives, and anyone who needs to extract important information from video or audio content quickly.

  • Scroll through to check it out for yourself!
  • Original summaries that highlight the key points of your content
  • Customizable to fit your specific needs
  • AI-powered technology that ensures accuracy and comprehensiveness
  • Scroll through to check it out for yourself!
  • Original summaries that highlight the key points of your content
  • Customizable to fit your specific needs
  • AI-powered technology that ensures accuracy and comprehensiveness

Unlock the Power of Efficiency: Get Briefed, Don’t Skim or Watch!

Experience the power of instant video insights with VidCatter! Don’t waste valuable time watching lengthy videos. Our AI-powered platform generates concise summaries that let you read, not watch. Stay informed, save time, and extract key information effortlessly.

hi there I'm etan and welcome back toWix Wiz in this video I'll be showingyou how to create an AI driven Wixchatbot using the native Wix chat andopen AI so we'll be creating a chatbotthat looks just like this that can besent messages by visitors such as Hi howare youand then respond using openai's GPTmodules with AI generated content so ifyou're interested in creating somethinglike that let's get startedthank you[Music]so first I'm just going to go over myinitial setup here and we won't bestarting from zero because we've touchedon some of these topics already inprevious videosso what I've done is here inside of mybackend files I have the open AI jsw Wmodule and here is just a basic call tothe chat GPT 3.5 turbo moduleI'm just going to zoom in a little bitso you can see betterand we get back the response and wereturn the message part of the responseso that's what we have set up here andif you want to learn about how this isbuilt you can check out some of myprevious videosand what the other function that I haveset up is inside this chatbot modulelet me adjust this a little more so youcan see betterthere we go inside of this chatbotmodule and what we do here is basicallywe're going to take messages from thefront endand attach a system instruction to itand just slice it down to the last sixmessages and send it to get the responsefrom the other function I just showedyou before so those are two pre-builtfunctions that I'm going to be usingbecause the main focus of this tutorialwill be how to implement the techniquesthat we've already showed using the Wixchat appand of course I also have my API keyalready set up here inside of thedeveloper tools here inside the secretmanager so that's everything that wehave set up in terms of documentation weare going to be using the Wix chat backendin The Velo reference and we're alsogoing to be using this on message sentwhich is part of the chat boxum element documentation okay so thoseare two things that we're going to befocusing on in terms of documentation soif you want to have those open andfollow along then that would be a goodtime to do thatso now let's get started with the actualimplementation and the first step willobviously be to install the Wix chat appif you don't already have it installedon your website so here inside of theapp market I'm going to search for chatand here we have the Wix chat app andit's free to install I'm just going togo ahead and add it to the siteandnow we see that I'm just going to zoomoutright over here on the bottom right sidewe have the chaticon or chat widget that will initiate achat when a visitor comes to the site soand there are some settings that you cankind of adjust here so if we open upsettingsyou can choose different things in termsof How It's displayed if itautomatically opens uh design text Etcwe're not going to be touching most ofthis stuff but we will be touching onsome of these aspects as we design ourchatbotso let's go aheadand start with building out the frontendand what our front end is going to dowe're going to be doing this all on themaster page because this is the pagethatruns code on all the pages of the siteand since this chat widget is on all thepages of our site we're going to need tocontrol it through here if you're onlyshowing Wix chat on some of the pagesthen this might not be true for you butI think this is probably the most commonuse caseand we are going to be firing offa call to our AI when we send a messageokay so we have this on message senteventand once we send the message so we havea channel ID and we have a message textand it's important that weare doing this first because an ID achannel ID is only created when amessage is sent for the first time froma visitor okay so there's no Channeluntil the visitor sends a messageandlet's Implement that here on the frontendso I'm going over here and we have Wixchat I'm just going to change this toWix chat and not Wix chat one because weonly have one of theseand I'm going to start writing out theevent listener soQuick's chatDoton message sentand if we take a look at thedocumentation so here we have themessageand we have Channel ID and message textso what I'm going to do is I'm justgoing to get this messageand I'm going to sayconsole.log message just so that we cantake a look and see what this messagelooks likethis here you'll see the squiggly redline that indicates some kind of errorbut you'll see that this will still workregardless of that I think this might bejust some kind of mistake here in termsofthe typing in the back end of Wix so ifanybody from the Wix team is watchingmight want to take a look at that so I'mgoing to go ahead and publishand view siteand here on the bottom right we can seethe chat so at the moment it doesn'topen automatically but if I click hereand I just say hithen we get this automatic response fromthe system and this is something thatyou can change from your dashboardbut if we go into inspect here on thesideand we go here into the consoleyou'll see here that there's an objectthis is the message object so we havethe channel ID and we have thepayloadtext hi okay so this is this is the keyinformation that we're going to be usingfrom this object so mostly the channelID and the textand what we're going to do is that oncewe get text here fromfromthe user we're going to want to sendthat text back to ourum AI endpoint to the to the API andstart creating our conversation so inorder to do thatwhat we're going to dois we are going to createa variable here which is going to bemessagesand this is stuff also that we'vetouched on in previous tutorials so itshouldn't be completely new to youand what we're going to do is we'regoing to say constI'm writing a function now that's goingto generate a message logOkay so constlog message let's call it that andbasically what this is going to dois justgenerate aum a an object that will be stored hereinside of messages and if you don'tremember the structure here of thisobject is that it has a role and contentso we're going to sayon message equalsan objectand here we're going to have rowand this role is going to be determinedhere so we're going to sayrolland we're just going to pass this intothe message and here we're going to havethe contentand that's also going to be passed inhere as a parameterso I can actually just separate thesewith the commaand then we are going tomessages dot pushmessage okay very simple helper functionover hereand we're going to call this as soon asa message is sent so I'm going to saylog messageand the role will be userand these are these are roles that aredefined by the openaidocumentation so we have three types ofroles we have system user and assistantand system is the one that I showed youbeforeright this is going to be our systemmessagethat really instructs our AI how tobehave and the user is uh as it soundsthe user content the user input to thechatbot and the assistant is theresponses generated back from the AIand we're going to log the message andhere we want to tap it to message dotpayloaddot text I think it was let's justdouble check that in the documentationmessage.payload.txt okay and I'm alsogoing to want to get this channel ID soI can actually just copy it right overhereand have the channel ID and since we'reactually going to be using this messagepayload again I can also extract thatand use it as its own variable so wecould just actually copy these two linesand I'm going to move this blog messagedownwe're going to log a message and here Ican change this to message textand now what we want to do is we want toget the response from the AI so in orderto do that we're going to use thisfunction so generate bot answerFirst Step we're going to need to importthisimportgenerate bot answer from backend slashchatbotandthen I'm going to call it over here soconstancer is equal toand generate bot answer and this isgoing to take a parameter and if we takea look here at the function that webuilt the parameter is the messages okayso we're going to pass in all of themessagesand once we get this answer back we'regoing to want to log that message so I'mgoing to log a messageassistant assistsand I hope I'm spelling that right andanswerthat and okay so actuallywhat this answers comes back with let mejust do a short demonstration so let'srun let's run this generate bot answerfunction just so that we can see whatthis answer looks like because I wantyou to see it as well so messages weknow that this is an array and it hasobjectsand we have a systemmessagewhich will beum be niceand sorrydoing this all wrong rollis systemand contentis be niceand then we have anotherobject which isrole userand contentoopscontent how are you todayand let's give that a runopen AI API cannot be found okay so Ithink I named it open AI key so let's goahead and change that over here open AIkeyand give it another spinand here we have the answer that we gotbackand here so this is this is a consolethat I have here in open AI but returnedwith this is the answer that's generatedby the generate bot answer function andyou can see here that it comes alreadywith role and contentso essentially when I get this answerherein my front end I don't have to break itup in the log message I can actuallyjust pass it in as it is because it'salready built with the same structurethat I'm expecting here inside of thelog message function so I'm just goingto pass in the answer like that and nowwe get to the part where we actuallystart interacting with theback end of theWix chat so I'm going to go ahead hereand I'm going to add a new web moduleI'm just going to call it Wix chatand here we're going to be building outthe back endand that is what we have over here soit's send messageand you can see here that essentiallywhat it does is we give message textand a channel IDumwell that's how they built their theirfunction at least but essentially whatwe need to pass in over here is messagetext Channel ID andsend as visitor which we'll explain in amoment what that is in terms of metadatathat is optional okay so we don't haveto have optional we don't have to havesend as visitorlet's just explain for a second whatsenda's visitor means so it indicates Ifthe message is being sent as a user oras the businessand if it is undefined or false thenit's sent from the business and that'sessentially what we want okay because wewant to ascend we the user just senttheir message and we want to send backthe AI generated answer as if it's fromthe business so that's what we want hereso we're just going to say send asvisitor is false so let's copy over thisstarter codeand I'm going to head here to the backend I'm just going to put it over hereandI'm going to change essentially is wedon't need send as visitor and metadatato be passed inI'm not going to be using metadataand here I'm just going to write this asfalse because we're sending it as thebusinessand here I'm just going to make somechanges to make it async await becausethat's how I like to write out my codeso I'm going to say export asyncfunctionandconst or a weightWix chat backend.send messagewe can have your console.log messagesentand I'm just going to put that inside ofa try catchand here we're just going to sayconsole.logall rightokay and to be honest didn't change muchchanging it to async away this is just Ilike some uniformity in the code sowe're using async await in the front endwe should be using it in the back end aswelland that reminds me actually that thisneeds to be asyncso this is going to be an async functionthere you goum and this is still just red because ofbefore but we should have no issuesrunning this and now what we want to dois essentially importthat generate businesswhere was I Wix chat so we're gonnaimport this send chat message functionand maybe I would change this uh lateron to something else but for now I'mjust using what we copied over from thedocumentationand what we're going to do hereis import this on top level from backendchatbot ah no sorry not chatbot but Wixchatand then as soon as we get the answerback from the business and we log theanswer I'm going to just to send thatmessage as if it's from the business andwe're going to do that here using sendchat messageand we're going to pass in theum the text that we want from in thatmessage which is essentially the texthere from the answer so it's going to beanswerdot contentand we also need to pass in the channelIDsecond over here Channel IDand that should be enough to simulatethat the message is coming back from thebusinessokay so I'm going to go ahead andpublish thisand let's give it a test spin here soI'm going to enterand let's chatwho are youokay so I already see we have an errorhere r dot push is not a function solet's take a lookover here at the editormessages okay so this should be messageslike here so I'm going to go ahead andpublishand refresh over hereand let's try again who are youandmaybe it didn't refresh because I didchange this let's change that againlet's try refreshingwho are youokay good so now we're not throwing anyerror I guess I just didn't refreshproperly last time uh and now we're justwaiting for a response I'm an AIassistant designed to provide helpfulwhatever based on the instructions thatI gave it in the system instructions uhwhat they is it todayand we're waiting for the responseoh okay so I'm getting an error now Icannot read properties of undefinedreading contentokay so that essentially means thatthis answer came back undefineduh so that means we must be having somekind of issue here in our back end solet's go ahead and take a look at siteeventsso now that I have my logs open I'mgoing to try and send another messagehow are youokay let's seecannot read property 0 of undefinedwhich is not of type stringI cannot read property 0 of undefined solet's try and think where our error iscoming along heregenerate bot answers messageslog answer messageokay so I think this is where my problemisbecause answer comes back I know I saidbefore that this was the same structureas this but I was actually lying becauseanswer comes back as an objectbut these are just each parameters okayso this actually does not work at alllike I said it would so what I'm goingto do here is I'm just going to sayanswer dot roll and answerdot contentokay and this should solve our issue soI'm going to go ahead and publish thatand let's chatokay how can I assist you today I wantto buy youokay great so we're getting a back andforthand this means that everything isworking correctlyum as you can see here just a few thingsI want to point out so you can see thatfor the same userthechat history is logged okay and that'ssomething that's built into Wix chatso if you don't want the history to besaved for each user then maybe thismight not be the right business solutionfor you but in general assuming thatthis is working correctly I don't see adownside for people having theirprevious conversationsstored here it could actually be anupside in some casesso now I just want to pop into thesettings hereof the Wix chatso let's zoom out a little bitand I want to just switch some thingsaround so let's just walk through thesettings for a secondso if we click here on manage chatthis will take us to an area in thedashboard where we can manage some ofthe aspects of this chat bot so forexample you can schedule chat hours youcan make you can set things about thepre-chat form so for exampleyou know if I want to collect name oremailI wonder if there's a way also to turnthat offum okay so business let's set theidentity as businessandlet's see clearly learn morelet's see if there's a way to turn thisoffokayset online form so let's seeset online formwhen do weather visitors see the formnever okay so now you just saw a videoof me reading the documentation andfiguring something outumandexcellent so that's let's save thosechanges because I don't want that formto kind of interrupt the the flow of theconversation uh you might choose toleave it for your own business purposesthat's your uh prerogativeso I'm going to close thatandthen let's check out some of the otherthingsso we can change here if the chat willopen automatically or if it will show abubble notificationsomething like thiswhere the chat bot is displayedin terms of designso header designand text so for example my business orwebsite name I'm going to change toWix attach AIand hereumwe can changeuh offline messageand we can alsothere's a way also to setthat there will be okay chat formautomations okay so I can set anautomation to create new visitors with achat messageand that means that as soon as somebodyreaches the websitethen they will be greeted with a messageso if you want to set the message that'ssentby the business first then you'll haveto do that over here and you won't beable to do that usingum the AI modules or the front endbecause we need the user to send amessage beforethe channel is initiated so this wouldbe the only way to handle thisand send a chat message and here we canset it up so hi therelet me know if you have any questionsaboutcreating aan AI chatus like me okay so that's the purpose ofmy chat bot and I'm going to go aheadand activate thatand great now that automation is activeand we're gonna have to check this outin an incognito tab because as I saidtheseumthese conversations are all stored soall the changes I had now won't berelevant for my user unless I clearcache or something like that so what I'mgoing to do now is I'm going to headover to an incognito tab and show youwhat the changes we made look likeforeign[Music]