# Get Started Component

## **Component Visuals**

{% tabs %}
{% tab title="Visual 1" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2Fr5uUeAUCKVXC1TU16baw%2Freact%20get%20started1.png?alt=media&#x26;token=59987212-af45-457f-874b-f72adbdffea5" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 2" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FYzjwe4yvtdu6e6YByQy4%2Freact%20get%20started2.png?alt=media&#x26;token=915c2370-35c2-446e-907b-27345aa0c585" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 3" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FwksSGHNonyDqkZzyh9t5%2Freact%20get%20started3.png?alt=media&#x26;token=06586531-d7df-40b7-83f4-d45807d3d085" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="info" %}
To unlock early access to the component                                                           [**Get Access**](https://bijfwfnqtsj.typeform.com/to/eUXDpbuh)
{% endhint %}

### Installation

To use the `GetStarted` component, you need to install the Quest Labs React SDK:

* Open your terminal/command prompt.
* Navigate to your project's root directory using the `cd` command if you're not already there.
* Run the following command to install the `quest-sdk` package using npm:

```bash
npm install @questlabs/react-sdk
```

> This command will download and install the package and its dependencies into your project.

{% hint style="info" %}
Make sure your project has npm and Node.js installed, and that you have the necessary permissions to install packages in your project directory.
{% endhint %}

## Usage

To integrate the `GetStarted` component into your React application, follow these steps

* **Import the CSS**: In your JavaScript or TypeScript file where you're using the `GetStarted`, import the CSS styles for the component. This ensures that the component's styling is applied correctly.

```jsx
import '@questlabs/react-sdk/dist/style.css'
```

* **Import the TutorialComponent**: Import the `GetStarted`component from the `@questlabs/react-sdk` package.
* **Import the QuestProvider Component**: Import the `QuestProvider` component from the `@questlabs/react-sdk` package.

```jsx
import { QuestProvider, GetStarted }  from '@questlabs/react-sdk';
```

* **Pass the Required Props**:  Pass the required props to the `QuestProvider`. The required props are `apiKey`,  and `entityId`. and required props for the `GetStarted`component are `userId, questId, token`

## Code & Steps

{% tabs %}
{% tab title="QuestProvider" %}

```
import { QuestProvider, GetStarted } from '@questlabs/react-sdk';
import '@questlabs/react-sdk/dist/style.css'

function App() {
  return (
      <QuestProvider
        apiKey="your-apikey"
        entityId="your-entity-Id" 
        apiType= "PRODUCTION" // STAGING 
      >
      <GetStarted> </GetStarted>
      </QuestProvider>
  );
}

export default App;


```

{% endtab %}

{% tab title="GetStarted " %}

```
<GetStarted 
    userId=""
    questId=""
    token=""
    uniqueUserId="your-unique-user-id"
>
    // children
</GetStarted>
```

{% endtab %}

{% tab title="Header" %}

```jsx
<GetStarted.Header
    heading='your-heading' 
    subHeading='your-subHeading' 
/>
```

{% endtab %}

{% tab title="Footer" %}

```
<GetStarted.Footer
    text='your-company-name' 
    link='redirect-link'
    style={{ background : 'white' }}
/>
```

{% endtab %}

{% tab title="Preview" %}

```jsx
 <QuestProvider
        apiKey="your-apikey"
        entityId="your-entity-Id" 
        apiType= "PRODUCTION" // STAGING 
      >
       <GetStarted 
          userId=""
          questId=""
          token=""
          uniqueUserId="your-unique-user-id"
        >
          <GetStarted.Header />
          <GetStarted.Progress/>
          <GetStarted.Content />
          <GetStarted.Footer />
        </GetStarted>
        
 </QuestProvider> 
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
Replace `"your-api-key"` and `"your-entity-id"` with your actual Quest API credentials&#x20;
{% endhint %}

{% hint style="info" %}
Replace `"your-token"`, `"your-user-id", "your-questId"` with your actual configuration details.
{% endhint %}

Example Usage

Here's an example of how to use the `GetStarted`component within your React application

{% tabs %}
{% tab title="GetStarted " %}

```jsx
import { QuestProvider, GetStarted } from '@questlabs/react-sdk';
import '@questlabs/react-sdk/dist/style.css'

function App() {
  return (
    <div>
      <QuestProvider
        apiKey="your-apikey"
        entityId="your-entity-Id"
        apiType="PRODUCTION" // STAGING 
      >
        <GetStarted
          userId=""
          questId=""
          token=""
          uniqueUserId="your-unique-user-id"
        >
          <GetStarted.Header />
          <GetStarted.Progress />
          <GetStarted.Content />
          <GetStarted.Footer />
        </GetStarted>

      </QuestProvider>
    </div>
  );
}

export default App;
```

{% endtab %}

{% tab title="GetStartedWrapper" %}

```javascript
import { QuestProvider, GetStartedWrapper } from '@questlabs/react-sdk';
import '@questlabs/react-sdk/dist/style.css'

function App() {
  return (
    <div>
      <QuestProvider apiKey="your-apikey"
        entityId="your-entity-Id"
        apiType="PRODUCTION" // STAGING 
      >
        <GetStartedWrapper
          userId=""
          questId=""
          token=""
          isImageOpen={false}
          allowMultiClick={false}
          autoHide={false}
          headingText=""
          onCompleteAllStatus={() => { }}
          template={2}
          showLoadingIndicator={true}

          showProgressBar
          showFooter={true}
          styleConfig={{
            Arrow: {
              Background: "red",
              CompletedBackground: "yellow",
              CompletedIconColor: "red",
              IconColor: "blue",
            },
            Card: {},
            Description: {},
            Footer: {},
            Form: {},
            Heading: {},
            Icon: {},
            PrimaryButton: {},
            ProgressBar: {
              barColor: "",
              barParentColor: "",
              ProgressText: {},
            },
            SecondaryButton: {},
            Topbar: {},
            CardContainer: {},
            IsImageOpen: {
              ContainerDiv: {},
              ImageContainer: {
                ImageContainerProperties: {},
                Image: {},
              },
            },
          }}
          ButtonType="Buttons"
          Headers={[
            {
              heading: "",
              subHeading: "",
            },
          ]}
          arrowColor=""
          cardBackground=""
          cardBorderColor=""
          completedButtonBackgroundColor=""
          completedButtonColor=""
          descriptionText=""
          iconUrls={[
            "https://pin.questprotocol.xyz/ipfs/QmWSjM2BwmSW7pda3YmWxyFQ7sCJ9PVmVAwj1W9K7XAHhG"
          ]}
          isAutoVerify={false}
          onLinkTrigger={() => { }}
          onLoad={() => { }}
          variation="1"
          showAnnouncement={false}

          uniqueEmailId=""
          uniqueUserId=""
        />
      </QuestProvider>
    </div>
  );
}

export default App;
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
The above example uses all the props.
{% endhint %}

### Component Props

The `GetStarted` component accepts the following props:

<table><thead><tr><th width="253">Prop Name</th><th width="101">Type</th><th width="105">Required</th><th>Details</th></tr></thead><tbody><tr><td>userId</td><td>string</td><td>required</td><td>User ID for authentication.</td></tr><tr><td>token</td><td>string</td><td>required</td><td>Authentication token.</td></tr><tr><td>questId</td><td>string</td><td>required</td><td>ID of the Quest.</td></tr><tr><td>onCompleteAllStatus</td><td>function</td><td>optional</td><td>Callback function for handling completion status.</td></tr><tr><td>iconUrls</td><td>array of strings</td><td>required</td><td>Array of strings representing icon of urls.</td></tr><tr><td>uniqueUserId</td><td>string</td><td>optional</td><td>Unique user identifier.</td></tr><tr><td>uniqueEmailId</td><td>string</td><td>optional</td><td>Unique email identifier.</td></tr><tr><td>headingText</td><td>string</td><td>optional</td><td>Text for heading.</td></tr><tr><td>descriptionText</td><td>string</td><td>optional</td><td>Text for description.</td></tr><tr><td>autoHide</td><td>boolean</td><td>optional</td><td>Boolean to control auto hide behavior.</td></tr><tr><td>showProgressBar</td><td>boolean</td><td>optional</td><td>Boolean to control progress bar display.</td></tr><tr><td>arrowColor</td><td>string</td><td>optional</td><td>Color for arrows.</td></tr><tr><td>showLoadingIndicator</td><td>boolean</td><td>optional</td><td>Boolean to control loading indicator display.</td></tr><tr><td>showAnnouncement</td><td>boolean</td><td>optional</td><td>Boolean to control announcement display. </td></tr><tr><td>allowMultiClick</td><td>boolean</td><td>optional</td><td> Boolean to allow multi-click.</td></tr><tr><td>questIconColor</td><td>string</td><td>optional</td><td>Color for quest icons.</td></tr><tr><td>showFooter</td><td>boolean</td><td>optional</td><td>Helps remove or add footer in component.</td></tr><tr><td>onLinkTrigger</td><td>function</td><td>optional</td><td>Callback function for handling link triggers.</td></tr><tr><td>template</td><td>number</td><td>optional</td><td>Template types : 1 or 2.</td></tr><tr><td>ButtunType</td><td>string</td><td>optional</td><td>ButtonType: Arrow or Button</td></tr><tr><td>onLoad</td><td>function</td><td>optional</td><td>Runs after page loads</td></tr><tr><td>variation</td><td>string</td><td>optional</td><td>used to create different-2 variations</td></tr><tr><td>isImageOpen</td><td>boolean</td><td>optional</td><td>Boolean to control image</td></tr><tr><td>styleConfig</td><td>object</td><td>optional</td><td>An object containing CSS properties for styling various components within the get started process, including form, topbar, headings, descriptions,  and buttons.</td></tr></tbody></table>

**Headers**

<pre><code><strong>Headers= [{
</strong>  heading: 'Your Heading' 
  subHeading : 'Your SubHeading'
}]
</code></pre>

**You can customize the UI with type of styleConfig would be**

```
styleConfig = {{
  Arrow: {
    Background: "red",
      CompletedBackground: "yellow",
        CompletedIconColor: "red",
          IconColor: "blue",
            },
  Card: { },
  Description: { },
  Footer: { },
  Form: { },
  Heading: { },
  Icon: { },
  PrimaryButton: { },
  ProgressBar: {
    barColor: "",
      barParentColor: "",
        ProgressText: { },
  },
  SecondaryButton: { },
  Topbar: { },
  CardContainer: { },
  IsImageOpen: {
    ContainerDiv: { },
    ImageContainer: {
      ImageContainerProperties: { },
      Image: { },
    },
  },
}}
```

**You can customize the UI with the type of styleConfig would be**

### **Demo**

{% embed url="<https://drive.google.com/file/d/1ihJlJSdNpobOY7q83V6CLvg02p8f8B4f/view>" %}