In this chapter, we're going to add some improvements to our widget. We're going to start by explaining the error from the previous chapter. So basically what happened is there was an error every time I clicked start call from my VAPI voice call screen. I've come to a conclusion that this is a browser issue. It could be due to us developing on localhost, it could be due to lack of permissions, or it could be due to the microphone.
But the important thing is, even though it's thrown as an error, it is more of a warning because it doesn't actually break the functionality. It will simply fall back to another microphone that it can access. And here's another thing that I found out. So I tried into another browser, in this case Safari, and let's see what happens here when I click start a voice call and click start call. After I allow the microphone permissions, you will see that we actually get no errors in Safari.
There we go. So the assistant is now speaking and there we go. We have their transcript right here. So this is isolated to a browser bug. So we are OK with leaving it as it is.
But now we have a scrolling issue in the widget. So make sure you have your app running here. Make sure that you're on your main branch. Make sure you have synchronized all of your changes, right? The last thing we merged was 28 widget WAPI and now we're doing 29 widget improvements.
So what is the scrolling issue in the widget? So if you go ahead inside of your widget here with the working organization ID, I purposely entered this responsive mode And you can see that when I try to collapse this, this is how scrolling happens. That's not what I want. I want only this area right here to scroll and this to kind of be fixed as well as this. And while this isn't really an issue here, like this is fairly okay, it becomes an issue when you have these conversations, right?
You can see that you can't find your chat button. You have to go all the way down to find it. Right? So that's not really nice. And same thing in the voice call, right?
When the messages appear here, You can't really see them unless you scroll down. And also auto scroll doesn't work. So the AI components should actually auto scroll on new messages. It should scroll down to here but none of that happens. So let's go ahead and fix that.
So what I want to do is I want to go inside of my apps, widget, my modules, widget, UI and let's go inside of views, widget, view. And first thing I want to do is remove this to do where we ask confirm whether or not this is needed. So let's remove those two and just leave flex, hide full, width full, flex skull, overflow hidden, rounded, extra large, border and background muted. And then go inside of your layout in the widget app and in here where you wrap the children after the providers, go ahead and add a div like so and give it a class name with screen and height screen. So now not much should change here, but you should see that now it scrolls properly, exactly as we expected.
So this kind of stays fixed, this stays fixed, This is the only scrollable element. Same thing happens in our conversations right. And in here you can see we now scroll to bottom and we can scroll our messages whilst maintaining our text input right here. So that is what I wanted us to achieve. And if you try the transcript voice chat it should also work.
But let's just go ahead and just improve a few things here. So we can now go inside of our modules, widget, UI, screens. Let's go inside of the widget, voice, screen and in here we can now remove flex one. So we just need height full. And now let's also go inside of the widget chat screen.
Let's just confirm everything's okay here. So AI conversation I think this is fine as it is. We don't need to change anything here. Let's also go inside of widget inbox screen. So I'm just comparing with my original source code just to confirm that there isn't anything that we're adding that we don't need.
I think all of this is fairly okay. Excellent. Now that we have that solved let's go ahead and mark that as completed and now let's add the contact screen. So in the previous chapter we only developed the settings to load the assistant because that was the harder one. So what we have left here is the contact screen which is currently in to do state.
So I'm going to go ahead and I'm going to copy the voice screen. I'm going to paste it and I'm going to rename this to widget contact contact screen dot the SX so widget contact screen. And now in here we're going to simply display the phone number that is loaded, right? Nothing else we really need to do here. So we can remove the WAPI hook from here and instead what we can do is we can add widget settings, use atom value from Yotai and pass in the widget settings atom.
Make sure that you import it like that. Then let's go ahead and let's get the phone number here to be widget settings, question mark dot VAPI settings, question mark phone number. Let's develop the handle copy method here and let's prepare copied and set copied use state. And by default let's make it false and let's import use state from react instead of this handle copy let's first check if we have the phone number at all and if we don't let's break the method early on Now let's go ahead and await which means this needs to be asynchronous. So await navigator.clipboard.writetext.
Phone number. Like that. Let's go ahead and put this inside of try and catch. And in here, let's console error the error. We're not going to throw any toast messages here simply because this is in a very small screen.
So I'm not sure how that actually looks. And in here we're just going to do. Actually let's do. Let me just see. In the finally here.
I'm trying to find the best way to do this. Actually no it doesn't need to be in here. Let's do set timeout set copied the false after two seconds and in here set copied the true Like that. Perfect. Now let's go ahead and let's did we rename this we didn't so widget contact screen.
Let's rename that and in the widget header. Let's change this from voice chat to contact us, like that. In here we won't need the transcript at all, we can remove that, we won't need this. We can remove a lot of things after the widget header and we'll just build it again, it's easier this way. There we go.
So just leave the widget header. Not much we need. You can remove all AI imports here and you can remove the icons so we can add them back if we need them. Same for CN, same for useVapi. So if we need them again we'll just import them again.
Below the widget header here, let's go ahead and let's add a div with a class name which is going to be flex-height-full-flex-column-items-center-justify-center-and-gap-y-of-4. In here let's add a new div with a class name flexItemsCenter, justifyCenter, roundedFull, borderBackgroundWhite and padding 3. In here let's add a phone icon from Lucid React with the class name size6 text muted foreground. Below that let's add a paragraph available 24 7 and let's add a class name here which will be text muted foreground and then inside of here just below we are going to render the phone number and let's change this to be font bold and text to Excel. Now what I want to do is I want to render that here so let's go inside of our widget view component and let's remove the to do with widget contact screen, which is a self-closing tag.
Make sure you've imported it. And there we go. You should see the number here. So if you have any ideas for a better design here, feel free to add it of course, right. I'm just developing the one I thought of.
Now after this div here, let's open a new one with a class name BorderTopBGBackground Padding 4. Let's add a new div here with a class name flex, flex column, items center, gap y of 2. Inside of here let's add a button And in here we're going to check if we have copied this, we're going to render a fragment which shows the check icon from Lucid React. Give it a class name MR2 and size of 4 and text copied. And if not, we're going to do a copy icon inside of a fragment with copy number text like this.
And let's import copy icon from Lucid React. So just make sure you've added check icon and copy icon both from Lucid React. Just like that. And we're going to add one more button here which will very simply be a link. Make sure to import that from next link not from Lucid React.
So make sure double check that your import is working and give this an href of tell phone number. So if they are on their mobile devices or if they have FaceTime on their Macbooks when they click on this button it will actually call the number So that's quite cool I think. And let's add phone icon here again and call now button. Let's go ahead and give this as child, class name, full width and size large. And let's also add some features to this button here.
Class name, full width, on click, handle copy, size large, variant, outline. And let's see how this looks like. There we go. We can now copy the number or we can click call now and that's going to initiate the call. So a very simple contact us screen, right, which will allow you to see the number, copy it or directly call the number.
And the number that's displayed here is the exact one that you've selected here. So the last number is 76. Let's confirm 76. If I change this to 35 and click save settings, let's refresh. Let's click into call us 35.
There we go. So again, white labeling allows our customers to have much more freedom of expression when it comes to their voice features here. Amazing, amazing job. That's what I wanted us to do in this chapter, quite a short one, simple one, and let's go ahead and review it and merge it. So 29 widget improvements.
I'm going to go ahead and stage all of the changes. 29 widget improvements. Let's commit. After that I'm going to open a new branch, 29 widget improvements and then I'm just going to publish the branch. Now let's go ahead and review the pull request.
So here I have opened the pull request from 29 widget improvements into our main. Let's click create pull request here and let's wait for the review. And since this was a very simple one, we don't really have to go through the entire review. We know the changes, right? Only four files, some CSS changes and a new screen with no actual business logic in there.
So we added a contact screen to the widget. We can view the phone number, copy it with confirmation feedback, or start a call instantly. We also include back navigation as well as the availability status which is 24-7 because they are AI support agents. And then we fixed the full viewport wrapper to the widget content. We updated the main container styling with rounded edges, border, and improved overflow handling.
We adjusted the voice screen transcript area sizing for more consistent layout and scrolling, as well as simplified layout styling for overall consistency. Amazing, That's exactly what we did. Let's go ahead and merge this pull request and once we have merged it let's go back and head to our main branch and then let's synchronize the changes. Once we synchronize the changes let's double check within the graph to confirm everything is all right. So graph, there we go, 29 widget improvements.
I believe that that marks the end of this chapter and see you in the next one.