Navigating a website through the AI chat¶

The Alan AI Web Chat allows you to streamline website navigation and enable users to access website pages, sections and relevant materials in a single step. For example, if the user requests information from a specific webpage, the AI assistant can provide a brief response and direct the user to the necessary page, allowing them to obtain all the data they require. By navigating through the Alan AI Web Chat, users can quickly locate what they want on your website, webpage or web app.

In this tutorial, we will support navigation to website sections and opening PDFs with text commands sent to the AI assistant through the chat.

Note

To view the code of the website and dialog scripts, go to the Alan AI GitHub repository.

What you will learn¶

How to open website pages, sections and relevant materials from the AI chat
How to navigate a website with commands in the AI chat

What you will need¶

To go through this tutorial, make sure you have completed the following tutorial: Building an AI chat for a website.

Step 1. Add a generic navigation intent¶

Instead of having a separate intent for each page, we will add a generic intent to navigate to any required section or page on the website.

To the dialog script, add data for all sections and pages you want to open through the Alan AI Web Chat:

Dialog script¶

const PAGE_DATA = {
    "Home": {
        "url": "#",
        "variants": ["home", "main", "landing", "front", "starting"],
    },
    "About me": {
        "url": "#mu-about",
        "variants": ["about", "about me", "about you"],
    },
    "Services": {
        "url": "#mu-service",
        "variants": ["service_"],
    },
    "Portfolio": {
        "url": "#mu-portfolio",
        "variants": ["portfolio"],
    },
    "Contact": {
        "url": "#mu-contact",
        "variants": ["contact_"],
    },
    "Resume": {
        "url": "assets/pdf/alan-turing-jr-resume.pdf",
        "target": "_blank",
        "variants": ["resume", "CV", "curriculum vitae"],
    }
}

Here, the following data is provided for each section or page:

Name
Url
Target: same or new tab
Variants: alternative section or page names

Add the code to create a list of sections and pages to be used in a slot:

Dialog script¶

// Pages and sections list
let arrPageAliases = [];
for (const [page, pageData] of Object.entries(PAGE_DATA)) {
    for (const variant of pageData.variants) {
        arrPageAliases.push(variant + '~' + page);
    }
}

project.websitePages = arrPageAliases.join('|');
console.log(project.websitePages);

Add a generic intent that uses the created list of sections and pages in a slot:

Dialog script¶

// Generic navigation intent
intent(
    "(Open|Show|Display|View|Go to|Navigate to) (a|the|) $(p:websitePages) (page|screen|section|)",
    "$(p:websitePages) (page|screen|section)",
    p => {
        let page = p.websitePages.label;
        if (PAGE_DATA[page].target) {
            p.play({command: "openURL", url: PAGE_DATA[page].url, target: PAGE_DATA[page].target}, opts({force:true}));
        } else {
            p.play({command: "openURL", url: PAGE_DATA[page].url}, opts({force:true}));
        }
        p.play(
            `(Here you go|There it is|No problem). The ${page} page.`,
            `(Opening|Navigating to) the ${page} page`
        );
    }
);

Here, when the user asks to open a specific section or page, Alan AI sends the openURL command with the following data to the webpage:

Section or page URL
Target (if available)
Options to force execute the sent command (required since the Alan AI button is not active)

Additionally, Alan AI plays the name of the section or page opened.

Step 2. Add individual intents¶

In the dialog script, you may want to have additional intents that bring up a required section or page when the user says a phrase different from that defined in the generic intent. To do that, we will add individual intents with the navigation command:

Dialog script¶

// Individual navigation intents
intent(
    "(I want to|I need to|Will you|Would you|Please|) (go|get|bring|take) (me|) back (home|)",
    "(Home|Back|Start)",
    "Go back (home|)",
    p => {
        p.play({command: "openURL", url: "#"}, opts({force:true}));
        p.play("(Here you go|There it is|No problem)");
    }
);

intent(
    "Do you have a resume",
    "Where can I find (the|your|) resume",
    p => {
        p.play({command: "openURL", url: "assets/pdf/alan-turing-jr-resume.pdf", target: "_blank"}, opts({force:true}));
        p.play("(Here you go|There it is)");
    }
)

Step 3. Handle the navigation command¶

Finally, we will handle the openURL command sent from the dialog script in the webpage.

To the webpage, add the code for the onCommand handler:

Client app¶

<script>
  var alanBtnInstance = alanBtn({
    key: "YOUR_KEY_FROM_ALAN_STUDIO_HERE",
    onCommand: function (commandData) {
      if (commandData && commandData.command === 'openURL') {
        if (commandData.target === '_blank'){
          window.open(commandData.url,'_newtab' + Math.floor(Math.random()*999999));
        } else {
          window.location.href = commandData.url;
        }
      }
    },
    rootEl: document.getElementById("alan-btn"),
  });
</script>

Here, if the command contains the ``target`` data, the passed URL is opened in a new tab. Otherwise, the URL is opened in the same tab.

You can now test how navigation through the Alan A Web Chat works. In the webpage, click the Alan AI Web Chat button and try the following commands:

Go to services
Open a portfolio
Do you have a resume?