Step by Step Guide to getting started with A2O Solutions
A2O Solutions provides you the ability to leverage the power of Generative AI’s Large Language Models(LLMs) with a no-code approach. You do not need any development skills to get started with A2O Solutions. Below is a step-by-step guide to getting started with A2O solutions.
Step 1 – Navigate to Console: Navigate to A2O Console. You can also find the link on the menu bar that says “Try A2O Solutions”. See the below screenshot.
Step 2 – Account Creation: If you do not have an account, you need to sign up for an account. Click on the button that says “Sign up/ Login with A2O,” as shown in the below screenshot. If you already have an account, click the same button.
Step 3 – Login: If you do not have an account, click on the sign-up link at the bottom, enter your valid email ID, and click on continue. See the below screenshot on how it works. If you already have an account, enter the email and click continue.
Step 4 – Get Code: We made it easier for new users and existing using a password-less login approach. No need to remember the password; all you need to do is enter the code that is sent to your email ID.
Check the email you gave in the previous step; you will have an email with the code. The email would come from the “A2O AI Authentication” sender. We are using enterprise-grade authentication provider Auth0. Enter the code and click “Continue,” as shown in the below screenshot.
Check the email you gave in the previous step; you will have an email with the code. The email would come from the “A2O AI Authentication” sender. We are using enterprise-grade authentication provider Auth0. Enter the code and click “Continue,” as shown in the below screenshot.
*Check the email Spam folder if you cannot find the email in your inbox. You can also use the re-send option if you do not receive the email in 5 minutes.
Step 5 – Enter Code: Once you enter the correct code, you will be navigated to the A2O Console Dashboard. The A2O console dashboard provides you with all the features to upload files, create widgets, customize the same, and many other features. It looks like in the screenshot below.
Step 6 – Content Manager: The first step, before you create a chatbot, is to add your content sources. The content sources can be files or websites you want the chatbot to use. You can click on the “Content Manager” in the side navigation bar or click on “Start uploading files” on the home page. The below screenshot shows the same where they are on the screen.
Step 7 – Upload Content: Once you are on the “Content Manager” page, you can click on the “Upload Files” or “Add Website” buttons on the top right-hand of the screen to add content. Let’s first look at uploading files.
Upload Files:
You can upload file types such as PDF, DOCX, TXT, Markdown, ODT, and HTML. Once you click on the “Upload files”, you will get a popup showing the storage you have used so far and allows you to upload the file. Click on the upload button there to upload files.
When the upload is in progress, you will see the bubbles blinking, indicating the upload is in progress. Once complete, you will see the actual size of the file and a delete icon where you can delete the file.
Add Website:
You can also add your internal websites, external websites that you own, or websites where you have permission from the owner to use their content.
To add the website, click on the “Add website” button; you would need to enter the website's URL, click on the checkbox agreeing that you own the website or have the rights to use it, and then click on the Submit button. It looks like in the screenshot below.
Once submitted, our crawler will understand the site structure and crawl the pages individually. During this time, you will see the bubble blinking, and the status will be reflected on the status bar below. You can leave this page while the process is going on. You do not have to be on the page.
Do not be misled by the size of 0KB of the website content; it will not be updated until the whole process is complete. Once complete, you will see the actual size of the website crawled and an option to delete with the delete icon. Do not be misled by the size; it can be really small as it only takes the text and not images or formatting of the text into account.
Step 8 – Testing the Chatbot: Now that the files are uploaded, we want to test the chatbot before we create the widget. You have two options to test the Chatbot:
Option 1: You can click on Applications in the side menu and click on the A2O Corpus tile on that screen.
Option 2: You click on “New Chat” in the sidebar menu and use that as well.
In both of the options, you will be asked to enter the name of the chat and then select the relevant content sources. You can choose the files or websites that you want the chatbot to answer based on. This selection is very important as the chatbot will only answer based on your selected data sources. If something is not there in these sources, it will say, “There is no context available.” See the below screenshot on how it looks.
Once you select the appropriate files, your chatbot is ready. You can ask any questions related to the document or content source.
We selected the Microsoft 2022 Annual Reports file in the below case. As we ask questions like how many employees in Microsoft, it will answer correctly based on the document. When I selected only Microsoft and asked about Alphabet’s revenue, it said it did not have context. See the below screenshot.
Using the above steps, you can create additional named chats or chatbots as needed.
Step 9 – Create Widget: To create a widget, click on the Widget Manager and then click on the “Create Widget” button; you will get choices to select the content sources for the widget. Similar to what was tested in the previous step, select the appropriate files/ content sources.
After that, click on the “Continue to UI” button. Now, you will get options to change the logo color theme of the widget as per your brand. You can upload the logo, what you want to say in the beginning, the display name, and the color themes of the messages, as shown below. Once done, click on the “Save Changes” button, and you will be able to see the preview of the widget. You can also try to send a sample message to see the branding look and feel.
Step 10 – Embed Widget: Once you are satisfied, you can click on the “Get Code” button, and you will get the code to be embedded on the website. Click on “copy code” and then paste it before the closing tag of the <html>, or you can embed it in the <head> tag of the page as well, where you put in the usual scripts.
After you do this, ensure you clear the cache and then refresh the page. Voila! The chat widget should appear with the chosen branding. It looks like in the screenshot below.
Step 11 – Final Test: Once the embed is done, you can do the normal testing as you did the testing in Step 8; it should work the same. See below for how it looks on the website.
