Ionic 2.x/3.x - Ionic Walkthrough

Ionic 2.x/3.x - Ionic Walkthrough

Onboard your users easily with Ionic Walkthrough and improve your first time user experience

$10.00

Not yet rated
Iclic Labs

Iclic Labs

Member since 2014

Details

Version:
1.1
Size:
3mb
Ionic:
2.x,3.x
Platforms:
iOS, Android, Windows Phone
View ID:
2f2ea620
Released:
7 years ago
Updated:
7 years ago
Category:
Plugins
Tags:
onboarding, walkthrough, slider, slides, ionic2, ionic, icliclabs, iclic, ionic3

Thanks to all of you who have downloaded this plugin! Please consider leaving a rating and review, it would be really helpful to get your feedbacks. Thanks.


Plugin by icliclabs.com

This plugin is compatible with Ionic v2.x and v3.x!

Description

Onboard your users easily with Ionic Walkthrough and improve your first time user experience. Thanks to this component, you can easily embed screenshots of your application to explain the key features of your app. You can customize the phone image (iPhone or Android). You can also pick on of the following colors: silver, spacegrey, gold, white or black. This plugin works on iOS, Android and Windows Phone.

Test Before You Buy

You can test the app using Ionic View and enter the app id 2f2ea620.

Features

  1. Works with iOS, Android and Windows Phone.
  2. Easy to include in your existing app.
  3. 5 different device images: iPhone space grey, iPhone silver, iPhone gold, Android black, Android white.
  4. Easily custom the background color, the text color and the buttons.
  5. It comes with a full and detailed example.
  6. This component has well structured html, css and js files and is heavily commented, so that it is easy to edit, add your style, etc.

Installation

  1. Copy the app/components/ionic-walkthrough.ts file into your app directory
  2. Import IonWalkthrough component and add it to the declarations list in the app/app.module.ts file
  3. Copy the app/assets/ionic-walkthrough/ directory into your app/assets/ directory

That's all!

Usage

  1. in your view, add <ion-walkthrough [options]="slide"></ion-walkthrough> in your ion-slide, the parameter slide is an IonWalkthroughOptions where you set the title, the description, the image and other options.

That's all. Here is an example of the view, very simple. Just include the ion-walkthrough component:

<ion-content>
  <ion-slides #mySlider [options]="mySlideOptions">
    <ion-slide *ngFor="let slide of slides">

      <!-- insert ion-walkthrough component here -->
      <ion-walkthrough [options]="slide"></ion-walkthrough>
      <!-- -->

    </ion-slide>
  </ion-slides>
</ion-content>

Here is a full example of your page component with 1 slide:

import { Component, ViewChild } from '@angular/core';
import { NavController, Slides } from 'ionic-angular';
import { IonWalkthroughOptions } from '../../components/ion-walkthrough';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  // reference to the ionic slider (to be able to go to next slide)
  @ViewChild('mySlider') slider: Slides;
  // list of slides
  slides: Array<IonWalkthroughOptions>;
  // the ionic slider options if you want to customize it
  mySlideOptions: any;
  constructor(public navCtrl: NavController) {
    // customize your ionic slider if needed
    // https://ionicframework.com/docs/v2/api/components/slides/Slides/
    this.mySlideOptions = {};
    // keeping a reference so we can access `this.slider` from our onClick function
    let _this = this;


    // add your slides here. Note that all attributes are not mandatory, only title, description and image are.
    this.slides = [
      {
        title: 'Welcome to Ionic Walkthrough!',
        description: '<b>Ionic Walkthrough</b> is an Ionic component to quickly onboard new users. Simply specify a title, a text and an image for each slide.',
        image: './assets/screenshots/ios_1.png',
        styles: {
          background: 'linear-gradient(to right, #347eff 0%, #1ea3ff 100%)',
          titleColor: '#fff',
          descriptionColor: '#fff'
        },
        layout: {
          position: 'bottom', //top, bottom (default)
          deviceType: 'iphone', //iphone, android (default)
          deviceColor: 'silver' //iphone: silver, spacegrey, gold  android: white, black (default)
        },
        buttons: {
          left: {
            text: 'SKIP',
            textColor: '#fff',
            onClick: function() {
              alert('go to sign up page')
            }
          },
          right: {
            text: 'NEXT',
            textColor: '#fff',
            onClick: function() {
              _this.slider.slideNext(); //using the ionic slider to go to the next slide
            }
          }
        }
      }
    ];
  }
}

Other Popular Plugins:

  1. Ionic Categories: Ionic v2.x/v3.x
  2. Ionic Passcode Square: Ionic v2.x/v3.x
  3. Ionic Passcode Flat: Ionic v2.x/v3.x
  4. Ionic Passcode Round: Ionic v2.x/v3.x
  5. Ionic Shrinking Header: Ionic v2.x/v3.x
  6. Ionic Material Sidemenu: Ionic v2.x/v3.x
  7. Ionic Walkthrough: Ionic v2.x/v3.x
  8. Ionic Contacts Inviter: Ionic v2.x/v3.x
  9. Ionic Cover Header: Ionic v1.x - Ionic v2.x/v3.x
  10. Ionic Profile Header: Ionic v2.x/v3.x
  11. Ionic Numeric Keyboard: Ionic v1.x - Ionic v2.x/v3.x
  12. Ionic Phone Number Validator: Ionic v1.x
  13. Ionic Cover Item: Ionic v1.x
  14. Ionic Timer: Ionic v1.x

Need Custom Work?

If you need help with your Ionic apps, if you need a specific plugin or integration. Let's get in touch. I'll be glad to develop or advise you for your app! Email me at icl1clabs@gmail.com.

Hey there! You'll need to log in before you can leave a comment here.

Samuel Edusa

Samuel Edusa   ·   7 years ago

Hi, I have a few questions regarding integrating this component into my Ionic 3.x app! Followed the instructions but keep getting the error "Uncaught (in promise): Error: Template parse errors: Can't bind to 'options' since it isn't a known property of 'ion-walkthrough'" Thanks.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Samuel Edusa

Samuel Edusa   ·   7 years ago

Hi, I have a few questions regarding integrating this component into my Ionic 3.x app! Followed the instructions but keep getting the error "Uncaught (in promise): Error: Template parse errors: Can't bind to 'options' since it isn't a known property of 'ion-walkthrough'" Thanks.

Iclic Labs

Iclic Labs   ·   7 years ago

Please email me some code so I can reproduce it at icl1clabs@gmail.com

Samuel Edusa

Samuel Edusa   ·   7 years ago

Ok will do. Thanks.

Samuel Edusa

Samuel Edusa   ·   7 years ago

Just sent you the email.

Samuel Edusa

Samuel Edusa   ·   7 years ago

Any luck figuring out the issue? Thanks

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Noam Gabriel Jacobson

Noam Gabriel Jacobson   ·   6 years ago

This is not a walk through it is better defined as slides with text and image. Very misleading name.

Iclic Labs

Iclic Labs   ·   6 years ago

Hello @NoamGabrielJacobson, this is a walk through with slides. This plugin allows developers to easily walk their users through the main features of their app. If you are unhappy with this plugin, reach out to me by email. Cheers.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Noam Gabriel Jacobson

Noam Gabriel Jacobson   ·   6 years ago

This is not a walk through it is better defined as slides with text and image. Very misleading name.

Iclic Labs

Iclic Labs   ·   6 years ago

Hello @NoamGabrielJacobson, this is a walk through with slides. This plugin allows developers to easily walk their users through the main features of their app. If you are unhappy with this plugin, reach out to me by email. Cheers.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Samuel Edusa

Samuel Edusa   ·   7 years ago

Hi, I have a few questions regarding integrating this component into my Ionic 3.x app! Followed the instructions but keep getting the error "Uncaught (in promise): Error: Template parse errors: Can't bind to 'options' since it isn't a known property of 'ion-walkthrough'" Thanks.

Iclic Labs

Iclic Labs   ·   7 years ago

Please email me some code so I can reproduce it at icl1clabs@gmail.com

Samuel Edusa

Samuel Edusa   ·   7 years ago

Ok will do. Thanks.

Samuel Edusa

Samuel Edusa   ·   7 years ago

Just sent you the email.

Samuel Edusa

Samuel Edusa   ·   7 years ago

Any luck figuring out the issue? Thanks

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Samuel Edusa

Samuel Edusa   ·   7 years ago

Hi, I have a few questions regarding integrating this component into my Ionic 3.x app! Followed the instructions but keep getting the error "Uncaught (in promise): Error: Template parse errors: Can't bind to 'options' since it isn't a known property of 'ion-walkthrough'" Thanks.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Hey there! You'll need to log in and purchase the add-on before you can leave a rating here.

There are no ratings for this plugin yet

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}