Documentation

Quick Start

1. Choose a template or start from scratch
2. Define your agent's personality and purpose
3. Configure conversation flow and responses
4. Test your agent in the playground
5. Deploy and share with your team or the world

• What problem does this agent solve?
• Who is the target audience?
• What actions should users take after talking to it?
• What tone and personality fits best?

🔗 1. Snippet Embed Method

The easiest way to add a chatbot to any website. Just include our JavaScript file and it automatically injects the chatbot interface.

Basic Implementation

<!-- Add this before closing </body> tag -->
<script src="https://cdn.yeahnoiknow.com/ynik-embed.js" 
        data-agent-id="your-agent-id"
        data-position="bottom-right"
        data-theme="dark"></script>

Configuration Options

🎨 2. Custom UI Method

Build your own chat interface while YNIK handles all the backend logic. Use data-ynik attributes to identify elements.

HTML Template

<!-- Chat Container -->
<div class="max-w-md mx-auto bg-gray-900 rounded-lg shadow-xl" 
     data-ynik="container" 
     data-agent-id="your-agent-id">
  
  <!-- Messages Area -->
  <div class="h-96 overflow-y-auto p-4 space-y-3" 
       data-ynik="messages"
       data-ynik-first="Hello! I'm here to help. What can I assist you with today?">
    <!-- Messages will be injected here -->
  </div>

  <!-- Input Area -->
  <div class="border-t border-gray-700 p-4" 
       data-ynik="input-area">
    <div class="flex space-x-2">
      <input type="text" 
             class="flex-1 px-3 py-2 border border-gray-600 rounded-lg bg-gray-800 text-white" 
             data-ynik="input" 
             placeholder="Type your message...">
      <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700" 
              data-ynik="send-button">
        Send
      </button>
    </div>
  </div>
</div>

Message Bubble Templates

<!-- User Message Template -->
<div class="flex justify-end" data-ynik="user-message">
  <div class="bg-blue-600 text-white px-4 py-2 rounded-lg max-w-xs" 
       data-ynik="user-bubble">
    <!-- User message content -->
  </div>
</div>

<!-- Bot Message Template -->
<div class="flex justify-start" data-ynik="bot-message">
  <div class="bg-gray-700 text-white px-4 py-2 rounded-lg max-w-xs" 
       data-ynik="bot-bubble">
    <!-- Bot message content -->
  </div>
</div>

Initialize Custom UI

<script src="https://cdn.yeahnoiknow.com/ynik-custom.js"></script>
<script>
  // Initialize YNIK with your custom UI
  YNIK.init({
    agentId: 'your-agent-id',
    customUI: true,
    onReady: function() {
      console.log('YNIK agent ready!');
    },
    onMessage: function(message, isUser) {
      console.log('New message:', message);
    }
  });
</script>

Required Data Attributes