This button over here called show demo and if i click on this button we can see we have this onboarding screen pop-up displayed over here and we can go ahead and click on the next step.
And here we can see we have the second step displayed over here and let's click on the next step and here we can see we have the last step displayed over here and if i click.
On finish it is hidden so this is how it works and we also have a skip button so if i click on show demo and if i click on the next button and here we are on the second.
Step and if i click on skip we can see that it is hidden so this is what we're gonna add in our blogger website now if you want to learn how to design all of this from scratch.
Using html css and javascript i have videos on that you can go ahead and check them out i will leave the link in the description of this video and i will also leave the link of the source code.
Here i'm in the dashboard of my blogger website and we can add the onboarding screen inside a post or a page let's add it inside a new post so let's click on new post.
Now onboarding screens are basically added to services that you already have so for example if you have a color generator service you can add an onboarding screen to that page so that.
The user can understand how your page works but for now i'll just show you how to add this to a new post so here for the title i just type our service now when you're adding this.
Onboarding screen to your existing service there may be a lot of code by default over here so what you have to do is first of all go to the html view so you can click on this button and click.
On html view and then find the place where you want the button to be so you want to have this button over here for the onboarding screen so find the place in the code.
Where you want the button to be Wesdigital
Positioned and then click over there and paste the code over there all right let's go to the source code and here we can see this is the html.So you can copy and paste the html into your post now if you want to change some of these things over here you can go ahead and do that.
So this is the text for the button so here we can see we have this show demo text you can change the text over here and then if you scroll down we can see the text for the skip button and.
Then here we can see we have the content so this is the heading for the first step so you can change this to whatever you want and you can also add your own content over here in place of this.
Paragraph and then here's the image so this is an svg file so you can go ahead and download any svg you want and paste it over here if you have an image you can just create an img tag and paste the.
Link of the image over here now if you are adding an img tag you have to go over here to the style.css file and you have to change this.
Svg to img so that the styles can be applied to your image and in the same way you have the second steps you can change the image the heading and this paragraph and the.
Same for the third step and you can add more steps by just copying this step division and pasting it down over here and changing the text and if you want to delete one of the.
Steps you can just delete this division of the class step and then lastly we have this button with the text next and if you go back to our onboarding screen and if i click on show.
Demo and if i click on the next button
Here we can see we have this finished text for the last step so if you want to change this text you can just go to the main.js file and.Here if you scroll down we can see that we have this if condition over here you can just change this text to whatever you want all right let's start by copying the.
Code so let's go to our index.html file and let's copy the html so i'll just start from here and all the way till the end of the division.
And let's copy this and paste it over here inside our post all right so that's it with the html now you can add the css so for the css you can just add it anywhere you want so.
I'll just add it at the top so just create a style tag and let's go to our style.css file and let's copy everything from here.
And let's paste it over here inside the style tag and let's scroll down and let's add the javascript so i'll just add it at the end.
So after the end of the html i'll just create a script tag and let's go back to our source code and let's go to the main.js file and let's copy everything from here.
And let's paste it over here and let's click on publish and confirm right our post has been published so let's click on view.
And here we can see we have the button so let's click on this show demo button and we can see that we have the onboarding screen displayed over here but here we can see that.
This element is being displayed over here because the overlay of our design doesn't have the correct z index so let's fix that.
And we also need to fix the color of this text so in our design we have black color so let's change the color and let's change the z index of the overlay so.
Let's go back to our post and let's open this post and let's scroll down and here we can see we have the overlay so here i'll just add a z index.
And let's set it to 200 and if we scroll down we can see we have the styles for the s3 this is the heading.
So i'll just set the color of the text to white right now let's click on update right now let's go back to our post and let's refresh this page.
And let's click on show demo button and now we have the black color displayed over here and if we scroll down we can see that we have the correct z index so.
Our onboarding screen is above all the other elements so everything looks alright let's click on the skip button and we can see that it is hidden let's click on.
The show demo button now let's click on the next button and everything is working all right now the last thing i will show you is how to display the onboarding screen by.
Default when you load the page so for that let's go back to our post and let's go to the javascript and if we scroll up we can see that in.
Our javascript we have this function with the name of init so if you call this function then our onboarding screen will be displayed so let's call the function right here so.
I'll just type init and let's click on update right now let's go back to our post and let's refresh this page and here we can see that we have the.
Onboarding screen displayed over here when the page loads and then we can click on the next buttons or click on the skip button and we can also click on this button to.
Show the onboarding screen now if you load this page once again we can see that the onboarding screen is displayed once again now we don't want to display this onboarding screen every.
Time the page loads so this can be distracting for the user so what we will do is we just display this onboarding screen once for a user so for that we will use local storage in the browser so.
For that let's go back to our javascript and let's go to the init function and here i'll just add a local storage so a local storage is basically a space in the browser where it can store some.
Data so here i'll just type local storage dot set item and here in parenthesis you have to add a key and a value pair.
So for the key i just type onboarding displayed and for the value i'll just type true now let's update this.
And let's go back to our post and first of all let me just show you the local storage so let's right click over here and click on inspect and you have to go over here to.
Application if you don't find this you can just click on this button and go to application and here in application you can find the websites so our website is.
Livebloggerofficial.blogspot.com so let's click on this website and right now we can see that we don't have any local storage displayed over here now let's refresh this page.