From bdcc940cd5c8c2c0548ae9ba6e9db1de3fa427f8 Mon Sep 17 00:00:00 2001 From: Chuck Carpenter Date: Thu, 25 Jul 2024 12:41:49 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20Docs=20updates=20for=20pro=20bet?= =?UTF-8?q?a=20setup/usage?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs-src/src/content/docs/guides/install.mdx | 2 +- docs-src/src/content/docs/guides/setup.mdx | 41 +++++++++++--------- 2 files changed, 24 insertions(+), 19 deletions(-) diff --git a/docs-src/src/content/docs/guides/install.mdx b/docs-src/src/content/docs/guides/install.mdx index 49060e39a..a1f04931c 100644 --- a/docs-src/src/content/docs/guides/install.mdx +++ b/docs-src/src/content/docs/guides/install.mdx @@ -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) diff --git a/docs-src/src/content/docs/guides/setup.mdx b/docs-src/src/content/docs/guides/setup.mdx index 768685544..4f6b93317 100644 --- a/docs-src/src/content/docs/guides/setup.mdx +++ b/docs-src/src/content/docs/guides/setup.mdx @@ -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'; @@ -35,31 +35,36 @@ First, you'll need to install the Pro package: -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`\> + + +***