diff --git a/examples/react-nextjs/app/layout.tsx b/examples/react-nextjs/app/layout.tsx index a723431..d112444 100644 --- a/examples/react-nextjs/app/layout.tsx +++ b/examples/react-nextjs/app/layout.tsx @@ -6,8 +6,9 @@ import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "Flows - React Next.js example", + description: + "Flows lets you build any onboarding you want. Guide users, increase feature adoption, and improve revenue.", }; export default function RootLayout({ children }: { children: React.ReactNode }) { diff --git a/examples/react-nextjs/app/page.tsx b/examples/react-nextjs/app/page.tsx index b3b2322..7b5ea4b 100644 --- a/examples/react-nextjs/app/page.tsx +++ b/examples/react-nextjs/app/page.tsx @@ -1,7 +1,7 @@ export default function HomePage() { return ( <> -

React Next.js example

+

Flows - React Next.js example

diff --git a/examples/vanilla-js/.gitignore b/examples/vanilla-js/.gitignore index eeeb7be..ea12ad6 100644 --- a/examples/vanilla-js/.gitignore +++ b/examples/vanilla-js/.gitignore @@ -1 +1,3 @@ -pnpm-lock.yaml \ No newline at end of file +pnpm-lock.yaml +package-lock.json +yarn.lock \ No newline at end of file diff --git a/examples/vanilla-js/cloud/index.html b/examples/vanilla-js/cloud/index.html deleted file mode 100644 index 38e98cf..0000000 --- a/examples/vanilla-js/cloud/index.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - Cloud - - - - - - - - -

Vanilla JS example - Flows JS

-

Flow 1 - basic flow

- -
-

Flow 2 - wait flow

- -
-
- Text -
-
- -
- - diff --git a/examples/vanilla-js/cloud/index.js b/examples/vanilla-js/cloud/index.js deleted file mode 100644 index 856e253..0000000 --- a/examples/vanilla-js/cloud/index.js +++ /dev/null @@ -1,32 +0,0 @@ -window.FlowsJS?.init({ - projectId: "216a2d2d-f4e2-44ae-b7e7-84399780294f", - userId: "rbnd-test-user", - flows: [ - { - id: "vanilla-demo-flow-2", - element: "#start-flow-2", - steps: [ - { - element: "#start-flow-2", - title: "Hello from Flow 2!", - body: "In this demo you can see how to point to elements and how to wait for actions.", - }, - { - element: ".flow-2-text", - title: "This is a text element", - body: "The tooltip is pointing to a text element with a class flow-2-text. To continue after this step click on the Continue button below the text.", - }, - { - wait: { - element: "#continue-flow-2", - }, - }, - { - element: "#continue-flow-2", - title: "This is the last step", - body: "This step waited for you to click on the Continue button below the text.", - }, - ], - }, - ], -}); diff --git a/examples/vanilla-js/favicon.ico b/examples/vanilla-js/favicon.ico new file mode 100644 index 0000000..9f96992 Binary files /dev/null and b/examples/vanilla-js/favicon.ico differ diff --git a/examples/vanilla-js/index.html b/examples/vanilla-js/index.html index d71e2b7..08a701a 100644 --- a/examples/vanilla-js/index.html +++ b/examples/vanilla-js/index.html @@ -3,87 +3,22 @@ - Vanilla JS example - Flows JS + Flows - Vanilla JS example + - - +
-

Vanilla JS example - Flows JS

-

Flow 1 - basic flow

- -
-

Flow 2 - wait flow

- -
-
- Text -
-
- -
-

Flow 3 - conditional steps

- - - -
-
- Variant A text -
-
-
- Variant B text -
-
-
- This is final step -
-
-

Flow 4 - conditional steps with forms

- -
-
- - -
-
-

Flow 5 - waiting on form input

- -
- -
- -
- -
-
-

Flow 6 - conditional steps from tooltip

- -
-
- Variant A text -
-
-
- Variant B text -
-
+

Flows - Vanilla JS example

+ + diff --git a/examples/vanilla-js/index.js b/examples/vanilla-js/index.js index 3d72b82..1c1e634 100644 --- a/examples/vanilla-js/index.js +++ b/examples/vanilla-js/index.js @@ -1,12 +1,12 @@ window.FlowsJS?.init({ - projectId: "vanilla-demo", + projectId: "e7d8eb63-7670-4da1-b0e0-d2d3331d108b", flows: [ { - id: "vanilla-demo-flow-1", - element: "#start-flow-1", + id: "local-flow", + clickElement: "#start-local", steps: [ { - element: "#start-flow-1", + targetElement: "#start-local", title: "Welcome to FlowsJS!", body: "This is a demo of FlowsJS. Click the button below to continue.", }, @@ -16,165 +16,5 @@ window.FlowsJS?.init({ }, ], }, - { - id: "vanilla-demo-flow-2", - element: "#start-flow-2", - steps: [ - { - element: "#start-flow-2", - title: "Hello from Flow 2!", - body: "In this demo you can see how to point to elements and how to wait for actions.", - }, - { - element: ".flow-2-text", - title: "This is a text element", - body: "The tooltip is pointing to a text element with a class flow-2-text. To continue after this step click on the Continue button below the text.", - }, - { - wait: { - element: "#continue-flow-2", - }, - }, - { - element: "#continue-flow-2", - title: "This is the last step", - body: "This step waited for you to click on the Continue button below the text.", - }, - ], - }, - { - id: "vanilla-demo-flow-3", - element: "#start-flow-3", - steps: [ - { - element: "#start-flow-3", - title: "Hello from Flow 3!", - body: "In this demo you can see how to define conditional steps. To continue after this step click on Variant A or Variant B.", - }, - { - wait: [ - { element: "#flow-3-A", action: 0 }, - { element: "#flow-3-B", action: 1 }, - ], - }, - [ - [ - { - element: ".flow-3-A-text", - title: "You selected variant A", - body: "This is variant A", - }, - ], - [ - { - element: ".flow-3-B-text", - title: "You selected variant B", - body: "This is variant B", - }, - ], - ], - { - element: ".flow-3-final", - title: "Goodbye", - body: "This step is shared with both variants", - }, - ], - }, - { - id: "vanilla-demo-flow-4", - element: "#start-flow-4", - steps: [ - { - element: "#start-flow-4", - title: "Hello from Flow 4!", - body: "In this demo you can see how to define conditional steps based on form values. To continue after this step select Option 1 or Option 2 in the select bellow.", - }, - { - wait: [ - { - form: { - element: ".flow-4-form", - values: [{ element: ".flow-4-select", value: "1" }], - }, - action: 0, - }, - { - form: { - element: ".flow-4-form", - values: [{ element: ".flow-4-select", value: "2" }], - }, - action: 1, - }, - ], - }, - [ - [ - { - element: ".flow-4-form button", - title: "You selected Option 1", - body: "This is Option 1", - }, - ], - [ - { - element: ".flow-4-form button", - title: "You selected Option 2", - body: "This is Option 2", - }, - ], - ], - ], - }, - { - id: "vanilla-demo-flow-5", - element: "#start-flow-5", - steps: [ - { - element: "#start-flow-5", - title: "Hello from Flow 5!", - body: "In this demo you can see how wait for form values to be filled. To continue after this step fill out the form.", - }, - { - wait: { - change: [ - { element: ".flow-5-email", value: /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/ }, - { element: ".flow-5-password", value: /^......+$/ }, - ], - }, - }, - { - element: ".flow-5-submit", - title: "Thanks for filling out the values, now you can proceed to submit.", - }, - ], - }, - { - id: "vanilla-demo-flow-6", - element: "#start-flow-6", - steps: [ - { - element: "#start-flow-6", - title: "Hello from Flow 6!", - body: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta iure quae soluta quam, eius ullam placeat nobis harum fugiat excepturi?", - hideNext: true, - footerActions: { - right: [ - { text: "Variant A", action: 0 }, - { text: "Variant B", action: 1 }, - ], - }, - }, - [ - [{ element: ".flow-6-A-text", title: "You selected variant A" }], - [{ element: ".flow-6-B-text", title: "You selected variant B" }], - ], - ], - }, ], - tracking: console.log, -}); -window.FlowsJS?.identifyUser("vanilla@flows.sh"); - -document.addEventListener("submit", (e) => { - e.preventDefault(); });