Add a greeting to the Agentic Interface

To enhance and streamline the user experience, you can use various UI widgets in the Alan AI Agentic Interface, such as cards, popups and buttons.

In this tutorial, we will add a greeting card to the Alan AI Agentic Interface that will be displayed every time the user opens the Agentic Interface and starts a new dialog session.

What you will learn

• How to greet users in the Agentic Interface

• How to use UI widgets in the Agentic Interface

What you will need

To go through this tutorial, make sure you have completed the following tutorial: Create an Agentic Interface for a website.

Step 1. Add a greeting to the dialog script

To the dialog script in your project, add the following code:

Dialog script

onCreateUser(p => {
    const greetingImage = "https://storage.googleapis.com/alan-public-images/alan-webflow-website/alan-chat-logo.svg";
    const greetingTitle = "Hi, I am your Agentic Interface!";
    const greetingText = "You can talk to me, ask questions and perform tasks with text commands.";
    const img = `<img style="display: block;margin-bottom: 20px; height:75px" src="${greetingImage}"/>`;
    const title = `<div style="margin-bottom: 10px;font-weight: 700;font-size: 20px;">${greetingTitle}</div>`;
    p.play(`${img}${title}${greetingText}`, opts({ force: true, markdown: true, audio: false, greeting: true}));
});

Now, when you open the Alan AI Agentic Interface, a greeting will pop up:

Step 2. Customize the greeting

Let’s change the greeting to match the look and feel of the webpage to which the Alan AI Agentic Interface is embedded. You can create your own greeting card or update the greeting template shown above by using markdown or HTML formatting and CSS styles.

To update the greeting template:

• In the greetingImage variable, specify the link of the image to be displayed

• In the greetingTitle variable, specify the greeting heading

• In the greetingText variable, specify the main text for the greeting

• In the img variable, specify CSS styles for the image

• In the title variable, specify CSS styles for the greeting title

Note

If you enable audio output for the Alan AI Agentic Interface, make sure you set the audio:false option in the play() function to prevent Alan AI from playing special characters used in the greeting message.

Dialog script

onCreateUser(p => {
   const greetingImage = "https://img.freepik.com/premium-vector/education-badge-logo-design-university-high-school-emblem-vector-logo-template_441059-534.jpg?w=2000";
   const greetingTitle = "Welcome to Our University!";
   const greetingText = "I am your Admission Agentic Interface! Feel free to ask me any questions regarding: \n - Admission process \n - Scholarships \n - Student life";
   const img = `<img style="display: block;margin-bottom: 20px; height:150px" src="${greetingImage}"/>`;
   const title = `<div style="margin-bottom: 10px;font-weight: 700;font-size: 20px;">${greetingTitle}</div>`;
   p.play(`${img}${title}${greetingText}`, opts({ force: true, markdown: true, audio: false, greeting: true}));
});