Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

📝 Docs updates for pro beta setup/usage #2928

Merged
merged 1 commit into from
Jul 25, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs-src/src/content/docs/guides/install.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -64,5 +64,5 @@ We strive to make it easy to use Shepherd in all the major frameworks, and have

- [angular-shepherd](https://github.com/shepherd-pro/angular-shepherd)
- [ember-shepherd](https://github.com/shepherd-pro/ember-shepherd)
- [react-shepherd](https://github.com/shepherd-pro/react-shepherd)
- [react-shepherd](https://github.com/shepherd-pro/shepherd/tree/main/packages/react)
- [vue-shepherd](https://github.com/shepherd-pro/vue-shepherd)
41 changes: 23 additions & 18 deletions docs-src/src/content/docs/guides/setup.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: Using Shepherd Pro
description: A guide to using the Pro feature of Shepherd.
description: A guide to using Shepherd Pro
---
import { Tabs, TabItem } from '@astrojs/starlight/components';

Expand Down Expand Up @@ -35,31 +35,36 @@ First, you'll need to install the Pro package:
</Tabs>


Before you create a new `Tour` instance, add your key via the `init` method:
To get started, add your key via the `init` method:

```javascript
import Shepherd from '@shepherdpro/pro-js';

Shepherd.init({YOUR API KEY});

const journey = new Shepherd.Tour({
...
});
```

The second thing needed is to create an instance in the Pro portal, which will give you an ID to add to the tour.
Then, if you've created journeys in the application and added targeting that is
met, a journey will be shown to your user. Otherwise, you can also still programmatically
start a journey in your application by using the `startJourney` method and passing the ID
of the journey.

```javascript
const journey = new Shepherd.Tour({
id: 'custom-123',
defaultStepOptions: {
cancelIcon: {
enabled: true
},
classes: 'my-custom-class'
},
useModalOverlay: true
});
Shepherd.`startJourney`('custom-UUID');
```

Then you just need to add steps to the journey instance and trigger the start method to begin. Shepherd Pro will take care of the rest and capture events in the portal.
### startJourney()

> **startJourney**(`id`): `Promise`\<`Tour | undefined`\>
Start the journey by ID, if found

#### Parameters

**id**: `string`

#### Returns

`Promise`\<`Tour | undefined`\>


***