How to make a tutorial first access to the site?

Asked

Viewed 1,150 times

3

I would like to create a First Access to My Website Tutorial, those that show what each field of the site means, I need a hint of how to do or if there is any Framework for this type of interaction with the user, I performed some searches and did not find anything, probably because I do not know the correct name of this type of interaction. Would anyone have any tips?

javascript jquery ajax html5 css3

  • http://github.hubspot.com/shepherd/docs/welcome/

2 answers

5

I believe the best tool is:

http://bootstraptour.com/ follows the documentation, example:

var tour = new Tour({
  steps: [
  {
    element: "#my-element",
    title: "Title of my step",
    content: "Content of my step"
  },
  {
    element: "#my-other-element",
    title: "Title of my step",
    content: "Content of my step"
  }
]});

Super easy, just javascript knowledge.

4

When using Bootstrap, bootstraptour is the best option like @Guerra propos, but otherwise I recommend the Hopscotch. With it you define the steps with json, it’s very simple: 

{
      id: "welcome_tour",
      steps: [
        {
          target: "header",
          placement: "bottom",
          title: "This is the navigation menu",
          content: "Use the links here to get around on our site!"
        },
        {
          target: "profile-pic",
          placement: "right",
          title: "Your profile picture",
          content: "Upload a profile picture here."
        },
        {
          target: "inbox",
          placement: "bottom",
          title: "Your inbox",
          content: "Messages from other users will appear here."
        }
      ]
    }

Browser other questions tagged javascript jquery ajax html5 css3

You are not signed in. Login or sign up in order to post.