How to Build an AI Voice Agent for Our Website (Synthflow AI, OpenAI Real-Time API, Zapier)
Let's build with Zapier and AI (100+ videos)📅 2024-11-21
Transcript
[00:00] and now we've officially added the chatbot widget Let's test it out hey there what AI Automation Services interest you hey I'm looking to automatically respond to my emails I don't want to respond to emails anymore got it we can definitely help with automating your email responses could I have your first and last name please yes it's Corbin Brown let's learn how we can start leveraging sylow's new widget here that allows us to put live chat Bots that actually talk to you in real time in any website let's take this one step further we're also going to be able to integrate this with zapier we're going
[00:30] to be able to take data from that conversation and do whatever we want with it my purpose is I'm going to make a little chat bot right here for AI and automation agency Services they're going to have a conversation I'm going to get their email their name what they want and then I'm going to set up a draft email all automatically using this new tech does that sound good let's jump in welome back y'all today's video is sponsored by sylow they hit me up and they're like hey Corbin we got a new widget it uses open AI realtime voice API and if you don't know what that is that's basically everything you've been seeing in the news when it comes to having conversations with AI with no latency and like basically feeling like you're talking to a real person and
[01:01] simpl takes it one step further we can extract data from that conversation and start Expedia processes so let's go ahead and make this little chat bot that's going to be on our website and not chat bot like I'm texting it no no no no conversations real time voice let's get started so we're going to go ahead and create a new assistant in sylow here in sylow we're going to say start from scratch I'm going Zoom down now right here we're going to go ahead and create a widget now what's super cool about this widget other than the fact that it actually connects to an AI voice model is how customizable it is so because I'm making a widget for my AI automation website here let's go and name it that say AI automation service
[01:35] now in today's video I'm going to Showcase doing this entire workflow with sylow you also have the ability to use realtime voice API as well this is pretty cool I haven't seen a lot of softwares integrate this yet this new tech both will get the job done but in today's video we'll use sylow so first major thing we can do here is how we actually visualize the underlying chatbot you can do sphere or radial but I like it when there's a little sphere there it just looks more futuristic so I like that but in theory if you went with this one you could actually upload a photo so if I wanted to upload a photo myself in SF I could do that but I'm not
[02:07] going to do that cuz I like the sphere now coloring wise I have like a darker theme from our website so I'm going to click this I'm going to go over here I know something like this grayish color I like that style-wise I'm going to keep it light coming down here we can actually continue customizing the palette here so for example maybe I don't want the background color to be F7 F7 maybe I want like a slight green Hue so come over here like that all right not bad text color we can go with something maybe lighter with button color let's go ahead and go with something like this there we go so far
[02:38] so good and what you'll notice is this is all real time so any change I make here is going to reflect here instantly with this right here this can embed in your website and what I mean by that is that in theory if you wanted to stop here for how you want it to visually look we can go to test here and then what you'll notice is that it kind of just looks like this right we can embed this within our website and have some type of conversation like this maybe a whole page dedicated to that but what I like like to do in this kind of context is have like a little chat bot that's like over here and what sylow does which is like honestly really cool is watch this I'm going to say allow widget to
[03:09] float so I'm going to go ahead and open that and because the actual name that's being reflected here I'm going to say I'm do AI automation agent just so it reflects that nice so the first option we have here is whether or not to show the name so we can close that if we don't want that I'm going keep that for me I'm going to say bottom left for how I want it oriented on my website now on page load if you want it instantly expand it go ahead and turn that off but for me I don't want that so I'm going to turn this off and then the super cool thing that I like about sflow here is the preview video watch this like that we have the ability to choose between female and male this right here I I
[03:40] don't know I like this this just seems super futuristic so I'm going to go female once you see this on the site as well you're going to be like whoa that looks kind of cool next we have two major options here which is custom vocabulary and filter words so if there's certain words you don't want this automation agent to say/ chatbot so maybe one for custom vocabulary like open AI like what kind of AI do you use we use open AI filter words don't don't talk about penguins don't talk about penguins stuff like this obviously you don't need to put don't talk about penguins but the idea is like anywhere they don't want to show up in conversation you put it there so far so
[04:12] good now if we ever wanted to test this assistant I can go ah and drag down here and view the test here but right now we haven't really set up any of the prompting which is very important in this entire process let's go to prompt and just so you don't get distracted up there I'm going to go and turn that off for now we're do this we're going to go to prompt so sylow they have a couple of different options here this is going to be the very first sentence that the assistant says so right now it says hey there how can I assist you I'm going to change this to start off the call here I'm going to say hey there what AI Automation Services interest you I'm going to go ahead and load in a prompt that I've created in the past kind of walk you through why I did what I did
[04:43] but there are templates here if you want to use what sylow provides such as outbound inbound b2bs I mean like look at all that pretty good stuff here When approaching creating your own prompt what I typically like to do is use sylow structuring and then just input variables that are relevant to what I want my agent to do so in this example here we have personality formal staying on task assisting role AI receptionist at webcafe AI specializing in customer service and asking what AI automation service a potential client wants that's important let it know the direction the call should go goal to assist callers by answering inquiries identifying their
[05:13] needs and directing them to the appropriate services and then we obviously don't want the agent to ever fabricate information about our business next very important block here is going to be your company info block put as much information contextually you want to put here about everything about your business where it's located hours Etc anything you want put there for me I'm doing Cafe Ai and AI automation agency helping with setting up automations for marketing Auto email responders CRM management and more you can put all list there next is the script instructions this is how the AI is going to interact with the phone call and the individual using it so checking out what I put here first identify the purpose of the call
[05:44] second should not be book an appointment that was part of an old script but number two should say understand AI Automation Services needed what what is needed in the phone call and then what I do is I identify variables here that will reference later on in building up this agent such as AI service and user email and then finally when that information is grabbed and we're going to go we'll conclude the call graciously the last little block here is for very important rules you want to make sure never happen in the call this is business to business specific to your needs and what you know from your past experience of calls what you don't want to happen so for example do not make promises or commitments that cannot be
[06:15] kept pretty good let's hit save take as long as you want on that prompt we're going to go ahead and go to actions now so with actions here we basically need to get two major types of actions here to my new action so the first one we're going to do is going to be open question the identifier is how we identified it in the script so we do user email notice how all that is lowercase that's important make sure your identifiers are all lowercase in this context is going to be the person that is calling email address and then we're going to give some example data here such as apples gmail.com this is just how structuring it should look when we receive it brown
[06:48] gmail.com Etc from here we're going to say save and attach nice let's get the second one here which is going to be the service requested so how I identified that in the script there was AI service so I'm going to do open question we'll do the identifier of AI service here we're going to go and say what AI automation service does the person want for their business these can be longer these can be shorter just really depending contextually on what you're trying to extract in that context one example output could be they want an AI automation for social media marketing that all looks good here save and attach so now that we have both of these attached we need to set up zap come in
[07:20] over to zapier Simply go to your app section and type in synf flow you'll see this option right here hit connect once you hit connect you're going to get prompted for API key go to Integrations go to rest API from here go ahead and create a new API key hit copy paste that over and you'll be connected once that's done let's go ahead and create a new zap so the purpose of this app is going to be the extraction of information from that call we're then going to take that information set up a draft email with our business account now one last little thing before we do that step and then integrate it into an actual website is when it comes to your model there is a bunch of other fine tuning you can do so
[07:51] for example for The Voice there's a ton of stuff we can do here so the first major thing is that you can actually change the voice sound itself so if I hit edit here we can actually import from 11 Labs we have a ton of different options when it comes to voices here hey there what AI Automation Services interest you hey there what AI Automation Services interest you so the idea is play around find the voice that you like you can even import voices from 11 Labs that's cool next you can adjust how you want the voice to interact with the individual whether there's going to be delay of 3 seconds 5 Seconds between exchanges and then we have a bunch of
[08:22] different options we can really find to here what I encourage you to do is just play around test around see what you like move those sliders if a slider goes too far to the right and you're like hold up hold up hold up this doesn't sound good move it back and then lastly for the call configuration which may be important for you I think the most relevant setting here would be the ability to limit the call duration so maybe you're like hold up someone's using this I don't want it to be infinite let's do a call duration of 6 minutes and proceed you also have the ability to enable recordings speaker boost and then the ability to kind of end the call early if it seems like
[08:52] there's no conversation which is going to be the max idle duration so there's no interaction within 15 seconds how it's set now will end the call or alternatively the way it starts to call maybe you want a little bit of delay before it just jumps right in with the pause before speaking let's it uper zap here I'm going to rename this zap widget call for the trigger here we're going to do sylow sylow AI for the trigger event we will do AI phone call completed we're going to hit continue here for the model ID we can find that back in our assistant and copy it right up here copy model ID paste that there hit continue and then right now we're going to have
[09:23] nothing cuz we haven't tested it yet so let's go to integrate this into our website get some dummy data and then show you the entire process here so we're going to come back to dashboard here we're going back to configure here I'm going to go to General let's go and open up that widget right there preview video yes okay it's all set all good to go in theory I can test this if I want let's go and add it to our website I'm hit copy embed code in this video I'm going to show you how to do it with Shopify but in theory this works with any type of website builder any type Corbin any type the idea here is that we simply just need to paste this code
[09:54] within the website builder itself some website Builders you simply just drag a block like web you can just drag a code block paste it there in Shopify I'm going to just paste it on the homepage to do this in Shopify we're going to hit these three ellipses hit edit code once you edit code and I encourage you to use something like Chad gbt or CLA if you get lost on this step right here once you hit edit code the file you're looking for is going to be a do liquid this either going to be a main. liquid or theme. liquid for me it's theme. liquid no not liquid like we're going to drink some nice lemonade on a hot day we're going to scroll down here and what we're looking for is just a body and
[10:26] Body in this context is just like the contents of the website itself to make my life easy I'm going to hit command F or control F and type in body okay that's the end of the body let's go to the top here and there we go the beginning of the body is going to look like that once we do that we're simply going to paste it there we go there is our code with this code pasted here and I encourage you to use chbt cloud if you get stuck on this spot simply just paste the entire file and just ask where do I put it you'll be good to go hit save once I hit save it's live it's good let's see it and now we've officially added the chatbot widget let's test it
[10:57] out hey there what AI Automation Services interest you hey I'm looking to automatically respond to my emails I don't want to respond to emails anymore got it we can definitely help with automating your email responses could I have your first and last name please yes it's Corbin Brown thank you Corbin I'm capturing your request to automate email responses and we'll ensure it reaches the right team could you also provide me with your email address yes it's contact at webcafe a.com great thanks I'll pass
[11:27] on your details and request we'll reach out to you soon with more info on setting up automated email responses anything else you might need I think that's all thank you for your time you're welcome Corbin thanks for reaching out to us have a great day all right so that's super cool I think I mean right at the bat I like the sphere animation it just seems super futuristic it's also super cool seeing like a little like Emoji thing there obviously you can turn that off if you don't want that so far so good let's check out the data coming back over to zapier here all we need to do now is do test trigger since we've Associated the model ID already we should get a call here here
[11:58] we go phone call a we get a couple things from this phone call we get the call transcripts and then what we care about and the variables we identified were the user email from contact webcafe ai.com and the underlying service that the user was looking for and as you see here we got it right here they want an AI automation email response service pretty good so far so with this information what we can do now is that right when the call ends we can set up our email or alternatively if you want to add like some type of delay block so maybe you don't want to instantly do the steps that are going to follow up a call
[12:29] simply just add a delay by zapier hit delay and you can be like hey don't do anything after that call for like 20 minutes two hours two weeks whatever may be for example we'll do 20 minutes minutes good to go for me I'm just going to do instantly so I'm going to delete this and what we're going to do is I'm going to use a Chad gbt block to kind of format this so I'm going do Chad gbt we're going to do an action event a conversation and I'm going to go ahead and say based on this lead data for my AI automation agency to give context of who you are we're going to do email semicolon and we'll do service wanted
[13:00] semicolon and then right here which is super cool because they kind of itemize it already in that synf flow block here we're going to Simply find what we're looking for here so in this context for very specific variables of user email and AI service we're going to do executed action return value click that and then we're going to slightly change our prompt here we're going to do email and service wanted we go alternatively the way you could approach this rather than the specific data points that we went ahead and extracted in that phone call is you can just load the entire transcript so if I want to do this again I can do call transcript and then then analyze the entire thing with a Chad gbt
[13:31] block to get exactly what I want from this though I'm simply going to put formulate the body of an email for this inquiry and then give a little context we're going to do context here with open a eyes new model of gbt 4L mini you're able to get a ton of information in one prompt for these body emails I'm just going to provide the context of typically what shows up in a business email that I put out in the past context business web Cafe AI Services range 1000 2,000 and every email with would you be interested in going in a call formulate the body of the email this should be all
[14:02] good to go add a memory key for consistent outputs here we're going to continue and test this step so here's the first email draft here I'm going to go ahead and change some stuff here so the email comes out a little bit more clean when it comes to data variables such as your name the position Etc I'm going to go and say my name is Corbin the position of CEO and then I'm going to add this nice little parameter here of do Max of four sentences so you want to limit the size of the return on that body that's how you do it retest step and this looks pretty good here obviously take as much time as you want on this step here but for example thank you for your interest in our AI Automation Services at webcafe AI
[14:32] particularly regarding AI Auto email responder which was referenced in that call from here I can simply go to Gmail we can create an action event of creating a draft based off this call create draft select your account from here the two is going to be simply that email that we grabbed from that call therefore for me to effectively grab that email we're going to add one more block here so will be another Chad gbt Block action event conversation we're going to say based on this data the whole purpose of this block will be data extraction so M br we're going to put in the extracted data from that call which will be executed action return value
[15:03] we'll then do output the email no text before after this is very specific and this is what's really nice about that kind of prompting this makes sure that it's just the email continue test this step and we should just see contact at webcafe a.com and we do sounds good come back to our crate draft here we're going to do two this is going to be based off the previous conversation that we had with chbt which going to be the reply looking good and then for our subject this could be fixed text so we can just say web Cafe AI inquiry in theory you can make a whole separate block here from Chad gbt that would make the subject line personalized to the individual call that you just had or
[15:35] sylow just had from here we're going to go ahead and do our body we're going to add that reply previously which is from our second block here boom and what I like to do is I typically like leaving the subject line within the draft email so maybe we'll paste it over and use that instead of the fix text one in addition you can add signatures to your email so the signature you already use in your Gmail you could add it there this also works with Outlook obviously labels and inboxes maybe for these kind of emails you include a PD onboarding PDF so we can add that as an attachment right there whatever it may be there's a ton of cool stuff we can do in this context continue test step and then
[16:06] coming over to my Gmail here I can go to drafts because that's what we created and we see it right there so from here I can go ahead and simply delete this you know maybe I want to use this subject line as well delete that add a dash here so whatever you want to do it just kind of puts you in the step in the right direction for the specific context of handling that information that you received on that chatbot now obviously the steps I just showed here can be applied to anything you now have the ability to basically set up a chat bot within your website extract relevant data that you care about and then push through wherever you want using zapier's
[16:37] ecosystem therefore thank you Natalie for handling that call and getting me a potential lead for my business if you feel like you learned something make sure you leave a like it's completely free if you want to see other videos I've done on sylow that shows you using this kind of tech in different context check out the video at the end here I did a whole other video showing you how to do this with a phone pretty cool stuff other than that though I'll see you in the next video it's a live chat bot it's live talk to it talk to it two random videos that's my face I'll see you in the next video