How to Create an Interface for Your Assistant
Once you've built and customized your assistant, the next step is to create an interface that will allow users to interact with it. In this guide, we’ll walk you through setting up an interface, theming it, and ensuring it blends seamlessly with your website or application.
Step 1: Choosing the Interface Type
To get started, navigate to the Interfaces tab within Superinterface. Here, you can select between two types of interfaces:
Single Assistant: Use this option if you’re deploying just one assistant, such as an FAQ bot or customer support assistant.
Group of Assistants: Choose this if you plan to use multiple assistants for different purposes, like having separate bots for sales, customer service, and tech support.
Choose the type of interface you want to create.
For this example, we'll use Single Assistant to keep it simple.
Step 2: Configuring Chat Options
Once you’ve selected the interface type, you can configure how users will interact with your assistant. Superinterface gives you two primary options:
Text-based chat: This allows users to type their queries and receive responses in text form.
Voice-based chat: If your assistant is voice-enabled, you can allow users to speak to it directly and receive voice responses.
Configure chat options.
For most use cases, text-based chat is sufficient, but if your audience prefers voice interactions, you can enable that feature as well.
Step 3: Customizing the Interface Appearance
You’ll now have the option to theme and style your assistant’s interface. This step is crucial for making sure the assistant aligns with your brand and the overall look and feel of your website or application.
Configure the appearance of your assistant.
Key Customization Options:
Bubble or Full-Page Interface: Decide whether the assistant will appear as a chat bubble in the corner of the screen or as a full-page chat interface.
Primary Color: Choose a color that matches your website’s theme. For example, you can set your assistant’s primary color to blue or green, depending on your branding.
Borders and Elements: Customize the borders and non-interactive elements to align with your design aesthetic. You can opt for softer tones like gray or more vibrant colors to match your overall design.
Light or Dark Mode: Choose between light and dark themes to best fit your website’s color scheme.
Step 4: Publishing your Interface
Once your interface is fully customized and ready to go, it’s time to publish it. Superinterface provides a few different methods to make this process as smooth as possible:
Get the script tag for your assistant.
Choose Your Publishing Method
Script Tag: The simplest method is using a script tag. Superinterface generates the code, and all you need to do is copy the script tag and paste it into the HTML of your website. This method works well for static websites and is quick to implement.
Modern Frameworks: If you’re using a modern JavaScript framework such as React or Vue, Superinterface provides options to integrate the assistant directly into your project. You'll be given a snippet that you can add to your codebase.
iFrame Embed: If you prefer using an iFrame, Superinterface allows you to embed the assistant through this method as well. It’s useful for CMS platforms where inserting code directly may be more limited.
Copy the script tag for your assistant.
With these steps, you can successfully publish your assistant on your website, ensuring a smooth and interactive experience for your visitors.