NavigateMe Embed Guide

🚀 Integration Overview

NavigateMe uses a two-script model:

1. **Core Script (Do NOT modify)**
2. **Embed Script (You customize this)**

🔹 Step 1: Add Core Script

<script src="navigateme.min.js"></script>

• This loads the NavigateMe engine
• Must be included **before embed.js**

🔹 Step 2: Add Embed Script

<script src="embed.js"></script>

• This is your **custom configuration layer**
• You define guides, API config, and initialization here

📦 Example Embed File

We have included a sample embed.js file in this package.

👉 Please refer to it and modify it based on your application needs (guides, API config, triggers, etc.).

🔹 Full Example

//embed.js
const guides = [
  {
    id: "end-to-end",
    type: "navigate",
    title: "End To End",
    steps: [
      {
        showMessage: "Starting with tax configuration",
        wait: 2000,
      },
      {
        selector: ".ant-menu-title-content:contains(Manage Workspace)",
      },
      {
        selector: ".ant-space-item:contains(Workspace Settings)",
      },
      {
        selector: ".ant-menu-title-content:contains(Tax Configuration)",
        wait: 4000,
      },
      {
        selector: "button:contains(Create New Configuration)",
        showMessage: "Complete this form to create tax configuration",
        proceedOn: ".ant-alert-action button:contains(Save):exact",
      },
      {
        showMessage:
          "create a new type by mapping the created tax configuration",
        wait: 2000,
      },
      {
        selector: ".ant-menu-title-content:contains(Manage Workspace)",
      },
      {
        selector: ".ant-space-item:contains(Workspace Settings)",
      },

      {
        selector: ".ant-menu-title-content:contains(Types)",
        showMessage: "Click Add and complete the form to create a new type",
        proceedOn: ".ant-alert-action button:contains(Save):exact",
      },
      {
        selector: ".ant-menu-item:nth-child(1)",
        showMessage: "Now create a rental",
        wait: 2000,
      },
      {
        selector: "button:contains(Create)",
        showMessage: "Complete this form to create rental",
        proceedOn: "button:contains(Submit):exact",
      },
      {
        selector: ".ant-menu-item:nth-child(1)",
        showMessage: "Click on the newly created rental",
      },

      {
        selector: ".ant-btn-color-purple span:contains(Add)",
        showMessage: "Complete the form to continue",
        proceedOn: "button:contains(Submit)",
      },
      {
        showMessage: "Agreement created successfully",
      },
    ],
  }
];

function initNavigateMe() {
  try {
    window.navigateme_guides = guides;
    window.navigateme_apiconfig = {
      url: "https://exampleurl.com/post",
      prebody: {
        app: "scaleflow",
        env: "production",
        workspaceId: sessionStorage.getItem("selectedWorkspace"),
      },
      headers: {
        "Content-Type": "text/plain",
      },
      params: { mode: "no-cors" },
    };
    NavigateMe.loader();
  } catch (e) {
    console.error("cannot start navigateme");
  }
}
initNavigateMe()

🛡️ Rules (Important)

• Always load `navigateme.min.js` **first**
• Do NOT modify `navigateme.min.js`
• Only customize `embed.js`
• Ensure initialization runs only once

⚡ TL;DR

<script src="navigateme.min.js"></script>
<script src="embed.js"></script>

Ship it.