diff --git a/README.md b/README.md
index 350cb01fc..577c2f7a5 100644
--- a/README.md
+++ b/README.md
@@ -11,14 +11,14 @@
 [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fshipshapecode%2Fshepherd.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%shepherd-pro%2Fshepherd?ref=badge_shield)
 ![npm bundle size](https://img.shields.io/bundlephobia/minzip/shepherd.js.svg)
 [![Test](https://github.com/shepherd-pro/shepherd/actions/workflows/test.yml/badge.svg)](https://github.com/shepherd-pro/shepherd/actions/workflows/test.yml)
-[![Maintainability](https://api.codeclimate.com/v1/badges/b295b0cc0d828ccc1b76/maintainability)](https://codeclimate.com/github/shepherd-pro/shepherd/maintainability)
-[![Test Coverage](https://api.codeclimate.com/v1/badges/b295b0cc0d828ccc1b76/test_coverage)](https://codeclimate.com/github/shepherd-pro/shepherd/test_coverage)
+[![Maintainability](https://api.codeclimate.com/v1/badges/b295b0cc0d828ccc1b76/maintainability)](https://codeclimate.com/github/shipshapecode/shepherd/maintainability)
+[![Test Coverage](https://api.codeclimate.com/v1/badges/b295b0cc0d828ccc1b76/test_coverage)](https://codeclimate.com/github/shipshapecode/shepherd/test_coverage)
 [![StackShare](https://img.shields.io/badge/Follow%20on-StackShare-blue.svg?logo=stackshare&style=flat)](https://stackshare.io/shepherd-js)  
 
 
 <a href="https://shepherdjs.dev/">
   <img 
-    src="https://shepherdjs.dev/landing/assets/img/demo.png" 
+    src="https://shepherdjs.dev/img/demo.png" 
     alt="Guide your users through a tour of your app" 
     style="height: auto; max-width: 800px; width: 100%;"/>
 </a>
@@ -81,15 +81,19 @@ Rails engine that generates and tracks Shepherd tours within an application
 
 ### Websites and Apps
 
-### [SimplePlanner](https://simpleplanner.io)
+### [Shepherd Pro](https://shepherdpro.com/)
+
+[Shepherd Pro](https://shepherdpro.com/) allows you to use the same JS library and add enhanced analytics to your tours while letting you also connect some integrations to deepen the knowledge and effectiveness of those user experiences. 
+
+### [SimplePlanner](https://logseq.com/)
 
 [SimplePlanner](https://simpleplanner.io) uses Shepherd to help new users get familiar with its collaborative scheduling approach. 
 You do need to sign up via OAuth or email to see the scheduling tour. 
 Check out the [Envato Tuts+ Startup Series on its codebase](https://code.tutsplus.com/series/building-your-startup-with-php--cms-742) which describes how Simple Planner was built.
 
-### [Brokermate](https://www.brokermate.com/) 
+### [LogSeq](https://logseq.com/) 
 
-[Brokermate](https://www.brokermate.com/) uses Shepherd to guide users through initial setup steps.
+[LogSeq](https://logseq.com/) uses Shepherd to guide users through initial setup steps.
 
 ### [Snapsure](https://snapsure.app)
 
diff --git a/landing/src/components/Header.astro b/landing/src/components/Header.astro
index 25772b992..15f34a3a7 100644
--- a/landing/src/components/Header.astro
+++ b/landing/src/components/Header.astro
@@ -6,48 +6,51 @@ import ShepherdHeader from '../images/shepherd-header.svg';
 const { isHome } = Astro.props;
 ---
 
-<header class="flex justify-center mt-4 w-full">
-  <div class="absolute ml-2 top-0">
-    <Fragment class="shepherd-logo absolute ml-2" set:html={ShepherdHead} />
+<header class='flex justify-center mt-4 w-full'>
+  <div class='absolute ml-2 top-0'>
+    <Fragment class='shepherd-logo absolute ml-2' set:html={ShepherdHead} />
   </div>
 
   <div
-    class="bg-grey-light flex flex-col font-heading justify-center items-center w-full"
+    class='bg-grey-light flex flex-col font-heading justify-center items-center w-full'
   >
     <nav
-      class="flex justify-center p-4 mt-40 max-w-8xl text-xl w-full lg:justify-between lg:mt-0"
+      class='flex justify-center p-4 mt-40 max-w-8xl text-xl w-full lg:justify-between lg:mt-0'
     >
-      <div class="flex lg:p-12">
-        <a class="pr-6 uppercase hover:text-navy-light lg:pr-10" href="/">
-          Demo
+      <div class='flex lg:p-12'>
+        <a
+          class='pr-6 uppercase hover:text-navy-light lg:pr-10'
+          href='https://github.com/shepherd-pro/shepherd'
+        >
+          GitHub
         </a>
         <a
-          class="pr-6 uppercase lg:pr-10 hover:text-navy-light"
-          href="https://shepherdjs.dev/docs/"
+          class='pr-6 uppercase lg:pr-10 hover:text-navy-light'
+          href='https://shepherdjs.dev/docs/'
         >
           Docs
         </a>
-        <a class="pr-6 uppercase hover:text-navy-light lg:pr-0" href="/blog">
+        <a class='pr-6 uppercase hover:text-navy-light lg:pr-0' href='/blog'>
           Blog
         </a>
       </div>
 
-      <div class="flex lg:p-12">
+      <div class='flex lg:p-12'>
         <a
-          class="pr-6 uppercase hover:text-navy-light lg:pr-10"
-          href="https://github.com/shepherd-pro/shepherd"
+          class='pr-6 uppercase text-pink-300 hover:text-navy-light lg:pr-10'
+          href='https://shepherdpro.com/'
         >
-          GitHub
+          Pro
         </a>
         <a
-          class="pr-6 uppercase hover:text-navy-light lg:pr-10"
-          href="/pricing"
+          class='pr-6 uppercase hover:text-navy-light lg:pr-10'
+          href='/pricing'
         >
           Pricing
         </a>
         <a
-          class="uppercase hover:text-navy-light"
-          href="mailto:hello@shepherdpro.com"
+          class='uppercase hover:text-navy-light'
+          href='mailto:hello@shepherdpro.com'
         >
           Contact
         </a>
@@ -55,95 +58,95 @@ const { isHome } = Astro.props;
     </nav>
 
     <img
-      class="hero-welcome p-4 w-full lg:mt-4 lg:p-0 lg:w-auto"
+      class='hero-welcome p-4 w-full lg:mt-4 lg:p-0 lg:w-auto'
       src={ShepherdHeader.src}
       alt={SITE_TITLE}
     />
 
-    <h2 class="font-body p-2 text-xl">
+    <h2 class='font-body p-2 text-xl'>
       Guide your users through a tour of your app.
     </h2>
 
-    <div class="flex justify-center w-full">
+    <div class='flex justify-center w-full'>
       {
         isHome && (
-          <div class="flex flex-wrap max-w-6xl p-4 w-full lg:flex-nowrap">
-            <div class="m-4 relative w-full lg:w-1/3">
-              <div class="border-4 border-navy w-full">
+          <div class='flex flex-wrap max-w-6xl p-4 w-full lg:flex-nowrap'>
+            <div class='m-4 relative w-full lg:w-1/3'>
+              <div class='border-4 border-navy w-full'>
                 <img
-                  class="absolute a11y-icon z-20"
-                  src="/img/accessibility.svg"
-                  alt=""
-                  role="presentation"
+                  class='absolute a11y-icon z-20'
+                  src='/img/accessibility.svg'
+                  alt=''
+                  role='presentation'
                 />
 
-                <div class="bg-grey-light border-b-4 border-navy h-40 relative w-full z-10" />
+                <div class='bg-grey-light border-b-4 border-navy h-40 relative w-full z-10' />
 
-                <div class="bg-white h-72 p-6 relative z-10">
-                  <h3 class="p-2 text-2xl text-center uppercase w-full">
+                <div class='bg-white h-72 p-6 relative z-10'>
+                  <h3 class='p-2 text-2xl text-center uppercase w-full'>
                     Accessibility
                   </h3>
 
-                  <p class="font-body p-2 text-xl">
+                  <p class='font-body p-2 text-xl'>
                     Shepherd has full keyboard navigation support, focus
                     trapping, and a11y compliance via aria attributes.
                   </p>
                 </div>
 
-                <div class="absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0" />
+                <div class='absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0' />
               </div>
             </div>
 
-            <div class="m-4 relative w-full lg:w-1/3">
-              <div class="border-4 border-navy w-full">
+            <div class='m-4 relative w-full lg:w-1/3'>
+              <div class='border-4 border-navy w-full'>
                 <img
-                  class="absolute customizable-icon z-20"
-                  src="/img/customizable.svg"
-                  alt=""
-                  role="presentation"
+                  class='absolute customizable-icon z-20'
+                  src='/img/customizable.svg'
+                  alt=''
+                  role='presentation'
                 />
 
-                <div class="bg-grey-light border-b-4 border-navy h-40 relative w-full z-10" />
+                <div class='bg-grey-light border-b-4 border-navy h-40 relative w-full z-10' />
 
-                <div class="bg-white h-72 p-6 relative z-10">
-                  <h3 class="p-2 text-2xl text-center uppercase w-full">
+                <div class='bg-white h-72 p-6 relative z-10'>
+                  <h3 class='p-2 text-2xl text-center uppercase w-full'>
                     Highly Customizable
                   </h3>
 
-                  <p class="font-body p-2 text-xl">
+                  <p class='font-body p-2 text-xl'>
                     Shepherd's styles are kept minimal, allowing you to easily
                     customize the look and feel, but still give you enough to
                     drop in and be ready to go quickly.
                   </p>
                 </div>
 
-                <div class="absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0" />
+                <div class='absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0' />
               </div>
             </div>
 
-            <div class="m-4 relative w-full lg:w-1/3">
-              <div class="border-4 border-navy w-full">
+            <div class='m-4 relative w-full lg:w-1/3'>
+              <div class='border-4 border-navy w-full'>
                 <img
-                  class="absolute framework-icon z-20"
-                  src="/img/framework.svg"
-                  alt=""
-                  role="presentation"
+                  class='absolute framework-icon z-20'
+                  src='/img/framework.svg'
+                  alt=''
+                  role='presentation'
                 />
 
-                <div class="bg-grey-light border-b-4 border-navy h-40 relative w-full z-10" />
+                <div class='bg-grey-light border-b-4 border-navy h-40 relative w-full z-10' />
 
-                <div class="bg-white h-72 p-6 relative z-10">
-                  <h3 class="p-2 text-2xl text-center uppercase w-full">
+                <div class='bg-white h-72 p-6 relative z-10'>
+                  <h3 class='p-2 text-2xl text-center uppercase w-full'>
                     Framework Ready
                   </h3>
 
-                  <p class="font-body p-2 text-xl">
+                  <p class='font-body p-2 text-xl'>
                     Shepherd is ready to drop into your application using React,
                     Ember, Angular, Vue.js, ES Modules, or plain Javascript!
                   </p>
                 </div>
 
-                <div class="absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0" />
+                <div class='absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0' />
               </div>
             </div>
           </div>
diff --git a/landing/src/layouts/MainPage.astro b/landing/src/layouts/MainPage.astro
index ec204a1cb..5a8e36ffb 100644
--- a/landing/src/layouts/MainPage.astro
+++ b/landing/src/layouts/MainPage.astro
@@ -10,36 +10,39 @@ const shepherdIncludeCode = `
 	<script type="module" src="shepherd.js/dist/shepherd.js"></script>
   
 `;
+
+const { PUBLIC_SHEPHERD_PUBLIC_KEY, PUBLIC_SHEPHERD_FRONTEND_API } = import.meta
+  .env;
 ---
 
-<Base>
+<Base data-testthing={PUBLIC_SHEPHERD_FRONTEND_API}>
   <Header title={SITE_TITLE} isHome={isHome} />
   <main>
-    <div class="font-heading mt-8 text-6xl text-center uppercase w-full">
+    <div class='font-heading mt-8 text-6xl text-center uppercase w-full'>
       <img
-        class="inline p-4 w-full lg:mt-4 lg:p-0 lg:w-auto"
-        src="/img/demo.svg"
-        alt="Demo"
+        class='inline p-4 w-full lg:mt-4 lg:p-0 lg:w-auto'
+        src='/img/demo.svg'
+        alt='Demo'
       />
     </div>
 
-    <div class="flex justify-center mb-20 w-full">
-      <div class="max-w-3xl text-center w-full">
-        <div class="hero-including mt-8">
-          <h3 class="demo-heading font-heading text-2xl uppercase">
+    <div class='flex justify-center mb-20 w-full'>
+      <div class='max-w-3xl text-center w-full'>
+        <div class='hero-including mt-8'>
+          <h3 class='demo-heading font-heading text-2xl uppercase'>
             01. How to Include
           </h3>
-          <div class="hero-example-code text-left">
-            <Code code={shepherdIncludeCode} lang="js" theme="nord" wrap />
+          <div class='hero-example-code text-left'>
+            <Code code={shepherdIncludeCode} lang='js' theme='nord' wrap />
           </div>
         </div>
 
-        <div class="hero-example mt-8">
-          <h3 class="demo-heading font-heading text-2xl uppercase">
+        <div class='hero-example mt-8'>
+          <h3 class='demo-heading font-heading text-2xl uppercase'>
             02. Example
           </h3>
 
-          <div class="hero-example-code text-left">
+          <div class='hero-example-code text-left'>
             <Code
               code={`
 	const tour = new Shepherd.Tour({
@@ -79,90 +82,90 @@ const shepherdIncludeCode = `
 
 	tour.start();
 					`}
-              lang="js"
-              theme="nord"
+              lang='js'
+              theme='nord'
               wrap
             />
           </div>
         </div>
 
-        <div class="hero-followup font-heading mb-12 mt-12 lg:mb-24 lg:mt-24">
-          <div class="bg-navy inline-block mb-4 w-56 lg:mr-4">
+        <div class='hero-followup font-heading mb-12 mt-12 lg:mb-24 lg:mt-24'>
+          <div class='bg-navy inline-block mb-4 w-56 lg:mr-4'>
             <a
-              class="button star bg-white border-2 border-navy p-6 text-navy whitespace-nowrap w-full"
-              href="https://github.com/shepherd-pro/shepherd"
+              class='button star bg-white border-2 border-navy p-6 text-navy whitespace-nowrap w-full'
+              href='https://github.com/shepherd-pro/shepherd'
             >
               ★ on Github
             </a>
           </div>
 
-          <div class="bg-navy inline-block mb-4 w-56">
+          <div class='bg-navy inline-block mb-4 w-56'>
             <a
-              class="button bg-white border-2 border-navy p-6 text-navy whitespace-nowrap w-full"
-              href="https://shepherdjs.dev/docs/"
+              class='button bg-white border-2 border-navy p-6 text-navy whitespace-nowrap w-full'
+              href='https://shepherdjs.dev/docs/'
             >
               View Docs
             </a>
           </div>
         </div>
 
-        <div class="mb-12 mt-8">
-          <h3 class="font-heading text-2xl uppercase">
+        <div class='mb-12 mt-8'>
+          <h3 class='font-heading text-2xl uppercase'>
             Brands that use Shepherd
           </h3>
 
-          <div class="flex flex-wrap justify-center w-full">
+          <div class='flex flex-wrap justify-center w-full'>
             <div
-              class="flex items-center justify-center m-4 h-32 relative w-32 md:h-48 md:w-48 lg:h-56 lg:w-56"
+              class='flex items-center justify-center m-4 h-32 relative w-32 md:h-48 md:w-48 lg:h-56 lg:w-56'
             >
               <div
-                class="bg-white border-4 border-navy flex items-center justify-center h-full p-6 w-full z-10 md:p-12"
+                class='bg-white border-4 border-navy flex items-center justify-center h-full p-6 w-full z-10 md:p-12'
               >
                 <img
-                  class="h-auto w-full"
-                  src="/users/ally.svg"
-                  alt=""
-                  role="presentation"
+                  class='h-auto w-full'
+                  src='/users/ally.svg'
+                  alt=''
+                  role='presentation'
                 />
               </div>
 
-              <div class="absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0">
+              <div class='absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0'>
               </div>
             </div>
 
             <div
-              class="flex items-center justify-center m-4 h-32 relative w-32 md:h-48 md:w-48 lg:h-56 lg:w-56"
+              class='flex items-center justify-center m-4 h-32 relative w-32 md:h-48 md:w-48 lg:h-56 lg:w-56'
             >
               <div
-                class="bg-white border-4 border-navy flex items-center justify-center h-full p-4 w-full z-10 md:p-8"
+                class='bg-white border-4 border-navy flex items-center justify-center h-full p-4 w-full z-10 md:p-8'
               >
                 <img
-                  class="h-auto w-full"
-                  src="/users/google.svg"
-                  alt=""
-                  role="presentation"
+                  class='h-auto w-full'
+                  src='/users/google.svg'
+                  alt=''
+                  role='presentation'
                 />
               </div>
 
-              <div class="absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0">
+              <div class='absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0'>
               </div>
             </div>
 
             <div
-              class="flex items-center justify-center m-4 h-32 relative w-32 md:h-48 md:w-48 lg:h-56 lg:w-56"
+              class='flex items-center justify-center m-4 h-32 relative w-32 md:h-48 md:w-48 lg:h-56 lg:w-56'
             >
               <div
-                class="bg-white border-4 border-navy flex items-center justify-center h-full p-4 w-full z-10 md:p-8"
+                class='bg-white border-4 border-navy flex items-center justify-center h-full p-4 w-full z-10 md:p-8'
               >
                 <img
-                  class="h-auto w-full"
-                  src="/users/bonsai.png"
-                  alt=""
-                  role="presentation"
+                  class='h-auto w-full'
+                  src='/users/bonsai.png'
+                  alt=''
+                  role='presentation'
                 />
               </div>
 
-              <div class="absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0">
+              <div class='absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0'>
               </div>
             </div>
           </div>
@@ -174,9 +177,8 @@ const shepherdIncludeCode = `
 </Base>
 
 <!-- Welcome page -->
-<script type="module" is:inline>
+<script type='module'>
   'use strict';
-
   import Shepherd from './node_modules/shepherd.js/dist/shepherd.js';
 
   (function () {
@@ -188,6 +190,9 @@ const shepherdIncludeCode = `
     }
 
     function setupShepherd() {
+      Shepherd.init(
+        'shp_97943967a5cb84a5ccd46febff8972cd4667e142e5996030130498eebc3f8236'
+      );
       var shepherd = new Shepherd.Tour({
         defaultStepOptions: {
           cancelIcon: {
diff --git a/landing/tailwind.config.mjs b/landing/tailwind.config.mjs
index 1b68949b8..b145aa926 100644
--- a/landing/tailwind.config.mjs
+++ b/landing/tailwind.config.mjs
@@ -14,7 +14,12 @@ export default {
       'navy-light': '#959FAC',
       grey: '#F3F5F5',
       'grey-light': '#EFF2F3',
-      white: '#FFFFFF'
+      white: '#FFFFFF',
+      pink: {
+        200: '#FFA6F6',
+        300: '#fa8cef',
+        400: '#fa7fee'
+      }
     },
 
     fontFamily: {
diff --git a/shepherd.js/src/tour.ts b/shepherd.js/src/tour.ts
index c8d0754a8..7f27caaa2 100644
--- a/shepherd.js/src/tour.ts
+++ b/shepherd.js/src/tour.ts
@@ -215,7 +215,6 @@ export class Tour extends Evented {
               id,
               currentStep: position,
               numberOfSteps: steps.length,
-              steps,
               tourOptions: tour.options
             }
           };