Intro your website in WebSharper

Sometimes we’d need some kind of a tutorial, an intro for our website to show the users how to use our product. IntroJS is perfect to do this and it works with WebSharper too.

To get IntroJS all we have to do is to get the Zafir.IntroJS (Websharper.IntroJS) NuGet package in our project.

First we need our html file we want the intro in. For this example I’m going to use the WebSharper SPA template. This index.html without modifications looks like this:

Now we need a button to start the intro. We can just add a button with the ws-onlick attribute and write the code in F# for it. Let’s call this button Intro:

<button ws-onclick="Intro">Intro</button>

Before using IntroJS we have to include the CSS stylesheet for it. The IntroJS extension has the main CSS and some themes as resources. To import the main CSS we simply have to add this line above our [<SPAEntryPoint>] :

[<Require(typeof<WebSharper.IntroJS.Resources.MainTheme>)>]

To add a theme we can just add another Require tag to our fs file, like this (important note: we must have the MainTheme require at the top in order to make the theme work properly):

[<Require(typeof<WebSharper.IntroJS.Resources.MainTheme>)>]
[<Require(typeof<WebSharper.IntroJS.Resources.ModernTheme>)>]

Now let’s add the IntroJS Start() function to our Intro button. Since we’re using a template we just have to find this part of the code:

IndexTemplate.Main()
    .ListContainer(
        People.View.DocSeqCached(fun (name: string) ->
            IndexTemplate.ListItem().Name(name).Doc()
        )
    )
    .Name(newName)
    .Add(fun _ ->
        People.Add(newName.Value)
        newName.Value <- ""
    )
    .Doc()
|> Doc.RunById "main"

Adding a new button is simple. We just call the name of the button (given with ws-onclick ) and pass a lambda function to it with our Start() function:

IndexTemplate.Main()
    .ListContainer(
        People.View.DocSeqCached(fun (name: string) ->
            IndexTemplate.ListItem().Name(name).Doc()
        )
    )
    .Name(newName)
    .Add(fun _ ->
        People.Add(newName.Value)
        newName.Value <- ""
    )
    .Intro(fun _ ->
        IntroJS.IntroJs().Start() |> ignore
    )
    .Doc()
|> Doc.RunById "main"

With this one line we are able to start our intro on the website, but we don’t have anything to show just yet. Let’s work on the html.

IntroJS works with two attributes data-step and data-intro on a DOM element. This DOM element will be in a highlight at the current step. With the data-step we can tell the order of the popups, the data-intro has the string to show in to popup. With these we can create our intro sequence for the website. For example:

<div data-step="1" data-intro="This is the first step">...</div>

We are ready to update our html file with these attributes. My example updated index.html:

With these modifications we are ready to test our first intro sequence on the website.

You can try out this example on the try.websharper website! Play with the code, experiment with the extension here:

Intro a website

Be sure to leave a 💚, it helps me know what stories you want to read, and leave a comment if you have any question! Hope you had fun reading the post and found your love for F# and for WebSharper.