Zenera Logo

Create an AI-Native Interface for a website

With the Zenera Platform, you can quickly build an AI-Native Interface for your website, webpage or web app. The Zenera AI-Native Interface transforms the way customers interact with apps and enhances the user experience with:

  • AI question answering: employ your private data sources — website pages, documentation, articles, policies and so on — to automatically respond to user queries in real time
  • Instant access to resources: streamline navigation to instantly access website sections, pages and related resources
  • Actions in the app: integrate with any software in your ecosystem and take actions with text or voice commands
  • Semantic search: grasp the context, intent and true meaning of every user query and provide contextually relevant responses
  • Application-level AI: transform unstructured and semi-structured data into actionable insights and reports

In this tutorial, we will create an AI-Native Interface for a university website. The AI-Native Interface will leverage the university website content as a source of knowledge. Users will be able to interact with the AI-Native Interface using text commands to get answers to their questions.

What you will learn

  • How to add an AI-Native Interface with voice and text commands to a website
  • How to create an AI-Native Interface like ChatGPT with custom knowledge for a website
  • How to create an AI-Native Interface driven by Application-level AI, AI question answering and LLMs
  • How to build an intentless dialog for an AI-Native Interface

What you will need

This is a getting started tutorial. No prior knowledge is required.

Step 1. Sign up for Zenera Studio

First, we need to sign up for Zenera Studio — Zenera's web IDE where we will define the data sources for the AI-Native Interface.

  1. Go to Zenera Studio.
  2. Sign up with a Google, GitHub account or with an email address.
  3. In Zenera Studio, click Create Project. Choose to create an empty project and give it any name.

Step 2. Define data sources for the AI-Native Interface

To let the AI-Native Interface employ the content of the website for question answering, we will use Zenera's Q&A service. The Q&A service allows crawling web and PDF resources to retrieve content and create a private knowledge memory that fuels the AI-Native Interface.

  1. To the dialog script, add the following code:
    corpus({
    url:"https://www.iastate.edu/admission-and-aid", 
    depth: 2, 
    maxPages: 100
});

    Where:

    • url: link to the website to be indexed
    • depth: crawling depth defining how far down the website the crawler must go to retrieve the content
    • maxPages: maximum number of pages to be indexed

    Note: The maxPages parameter is obligatory. If you do not set the maxPages parameter, only one page defined in the url parameter will be indexed.

  2. Save the dialog script and make sure that the indexing job has completed. To check the status of the job, at the bottom of the code editor, open Zenera Studio logs and make sure you see the ready status.

Step 3. Customize the AI-Native Interface

Next, we will customize the AI-Native Interface to match the style of the website or webpage to which it will be embedded.

  1. At the top of the code editor, click Integrations.
  2. In the options section, to the right of Text chat, click Change.
  3. Customize the AI-Native Interface to match your preferences. Zenera lets you edit the AI-Native Interface name in the header, change the color scheme, bubbles design and so on.
  4. Go back to the Integrations view.
  5. To the right of Visual styles, click Configure.
  6. On the Zenera Button tab, under Logos settings, click Add custom logos and upload the image to be displayed on top of the AI-Native Interface button.
  7. In the Text Chat section, use the right control to select the uploaded image and define color settings for the AI-Native Interface button.
  8. To the right of Button Style Name, click Save to save the button changes and apply them to the AI-Native Interface.

Step 4. Add the AI-Native Interface to a website

Next, we need to add the AI-Native Interface to the website. Zenera supports multiple web frameworks. In this tutorial, we will add to a webpage created with HTML and JavaScript.

  1. Go back to the Integrations view.
  2. Scroll down to the Embed code example section, the JavaScript tab:
    • To the right of the font block, click Copy and paste the code to the <head> section of the page.
    • To the right of the Zenera AI-Native Interface container code, click Copy and paste the code to the <body> section of the page.
    • To the right of the Zenera AI-Native Interface code, click Copy and paste the code closer to the end of the <body> section of the page.

Step 5. Test the AI-Native Interface

Make sure the AI-Native Interface is added to the webpage: open webpage and click the AI-Native Interface button.

In the message field of the AI-Native Interface, type questions, for example:

  • What are the minimum high school course requirements for high school applicants?
  • How do I apply for a bachelor's degree in electrical engineering?
AI-Native Interface TutorialsAdd a greeting