Get started with Chatmode quickly by following these steps to create and deploy your first AI agent embed.

​
Prerequisites

This guide will help you get started with Chatmode quickly. Follow these steps to create your first AI agent and deploy it to your chosen environment.

​
Step 1: Sign Up for an Account

  1. Visit Chatmode’s website and click on the “Sign Up” button.
  2. Create an account using your email or sign in with Google or GitHub.
  3. Complete your profile information and set up your organization.

​
Step 2: Create Your First Agent

  1. Ensure you have added an external provider API Key (e.g., from OpenAI) under Settings.
  2. From the dashboard, navigate to the Agents section and click “Create Agent”.
  3. Give your agent a name.
  4. Select the API Key you added in step 1.
  5. Choose the Model available through that API key (e.g., gpt-4-turbo).
  6. Configure your agent’s core settings:
    • Prompt: Define the agent’s personality and knowledge base
    • Temperature: Adjust creativity level (lower for more deterministic responses)
    • Maximum Tokens: Set the maximum response length

Start with a temperature between 0.3-0.7 for a good balance between creativity and accuracy.

​
Step 3: Train Your Agent (Optional)

  1. In the Trainings section, click “New Training”.
  2. Upload documents or enter text data relevant to your business.
  3. Start the training process to enhance your agent’s knowledge.

​
Step 4: Set Up an Environment

  1. Go to the Environments section and click “Create Environment”.
  2. Choose the EMBED environment type.
  3. Connect your previously created agent to the environment.
  4. Configure environment-specific settings (like Display Name/Picture, Initial Message, Domain Restrictions).
  5. Save the environment.

​
Step 5: Deploy Your Agent (Website Embed)

  1. Navigate back to the Environments section.

  2. Click on the EMBED environment you just configured to open its details/edit page.

  3. Find the Implementation or Share section (the exact location might vary slightly in the UI).

  4. Look for the “Bubble Code” snippet.

  5. Click the Copy button next to the Bubble Code.

  6. Paste this copied script tag into the <head> or <body> of your website’s HTML, ideally before the closing </body> tag.

    Example structure of the code you’ll copy (Do NOT copy this example directly, use the one from the UI!):

    <script type="module">
  import Chatmode from "https://cdn.jsdelivr.net/npm/@chatmode/embed/+esm";

  Chatmode.initBubble({
    // Required - Copied from UI
    environmentId: "YOUR_ENVIRONMENT_ID",
    // Optional - Copied from UI if set
    // iconKey: "YOUR_ICON_KEY",
    // updatedAt: TIMESTAMP,
    // Optional - Can be added/modified manually
    theme: "automatic",
  });
</script>

  7. The script will automatically add the floating chat bubble, typically in the bottom-right corner.

​
Step 6: Test Your Agent

  1. Once deployed, test your agent by sending messages and reviewing the responses.
  2. Analyze the conversation flow and make adjustments to your agent’s configuration as needed.

​
Next Steps