Skip to content

Commit

Permalink
feat: vanilla js example
Browse files Browse the repository at this point in the history
  • Loading branch information
@VojtechVidra
VojtechVidra committed Feb 29, 2024
1 parent e1069a3 commit 2067b69
Show file tree
Hide file tree
Showing 8 changed files with 20 additions and 303 deletions.
5 changes: 3 additions & 2 deletions examples/react-nextjs/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) {
Expand Down
2 changes: 1 addition & 1 deletion examples/react-nextjs/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export default function HomePage() {
return (
<>
<h1>React Next.js example</h1>
<h1>Flows - React Next.js example</h1>
<button id="start-local">Start local flow</button>
<button id="start-cloud">Start flow from cloud</button>
</>
Expand Down
4 changes: 3 additions & 1 deletion examples/vanilla-js/.gitignore
View file
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
pnpm-lock.yaml
pnpm-lock.yaml
package-lock.json
yarn.lock
29 changes: 0 additions & 29 deletions examples/vanilla-js/cloud/index.html
View file

This file was deleted.

32 changes: 0 additions & 32 deletions examples/vanilla-js/cloud/index.js
View file

This file was deleted.

Binary file added examples/vanilla-js/favicon.ico
View file
Binary file not shown.
83 changes: 9 additions & 74 deletions examples/vanilla-js/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,87 +3,22 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vanilla JS example - Flows JS</title>
<title>Flows - Vanilla JS example</title>
<meta
name="description"
content="Flows lets you build any onboarding you want. Guide users, increase feature adoption, and improve revenue."
/>

<!-- How you would use Flows in your own code -->
<!-- Make sure to lock specific version to avoid braking changes. See docs for more info. -->
<script src="https://cdn.jsdelivr.net/npm/@flows/js/dist/index.global.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@flows/js/css.min/flows.css" />
<script src="https://unpkg.com/@flows/js@latest/dist/index.global.js"></script>

<script src="index.js"></script>
</head>
<body>
<div>
<h1>Vanilla JS example - Flows JS</h1>
<h2>Flow 1 - basic flow</h2>
<button id="start-flow-1">Start flow</button>
<hr />
<h2>Flow 2 - wait flow</h2>
<button id="start-flow-2">Start flow</button>
<div>
<br />
<span class="flow-2-text">Text</span>
</div>
<br />
<button id="continue-flow-2">Continue</button>
<hr />
<h2>Flow 3 - conditional steps</h2>
<button id="start-flow-3">Start flow</button>
<button id="flow-3-A">Variant A</button>
<button id="flow-3-B">Variant B</button>
<div>
<br />
<span class="flow-3-A-text">Variant A text</span>
</div>
<div>
<br />
<span class="flow-3-B-text">Variant B text</span>
</div>
<div>
<br />
<span class="flow-3-final">This is final step</span>
</div>
<hr />
<h2>Flow 4 - conditional steps with forms</h2>
<button id="start-flow-4">Start flow</button>
<form class="flow-4-form">
<br />
<label>
Select one of the options and submit
<select class="flow-4-select">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</label>
<button>Submit</button>
</form>
<hr />
<h2>Flow 5 - waiting on form input</h2>
<button id="start-flow-5">Start flow</button>
<form>
<label>
Email
<input class="flow-5-email" type="email" />
</label>
<br />
<label>
Password
<input class="flow-5-password" type="password" />
</label>
<br />
<button class="flow-5-submit" type="submit">Submit</button>
</form>
<hr />
<h2>Flow 6 - conditional steps from tooltip</h2>
<button id="start-flow-6">Start flow</button>
<div>
<br />
<span class="flow-6-A-text">Variant A text</span>
</div>
<div>
<br />
<span class="flow-6-B-text">Variant B text</span>
</div>
</div>
<h1>Flows - Vanilla JS example</h1>
<button id="start-local">Start local flow</button>
<button id="start-cloud">Start flow from cloud</button>
</body>
</html>
168 changes: 4 additions & 164 deletions examples/vanilla-js/index.js
View file
Original file line number Diff line number Diff line change
@@ -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.",
},
Expand All @@ -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();
});

0 comments on commit 2067b69

Please sign in to comment.