Upload Chatbot Icon

Upload Chatbot Icon

This endpoint allows you to upload or update the icon image for a chatbot. The icon is displayed in the chat bubble that users click to open the chatbot.

Endpoint

POST https://api.nexvio.ai/v1/chatbots/{chatbotId}/icon

Headers

Name	Required	Description
Authorization	Yes	Your API key in the format: Bearer YOUR_API_KEY
Content-Type	Yes	Must be multipart/form-data

Path Parameters

Parameter	Type	Required	Description
chatbotId	string	Yes	The ID of the chatbot to update

Request Body

The request should be sent as multipart/form-data with the following parameters:

Parameter	Type	Required	Description
file	file	Yes	The image file to upload

Supported File Types and Sizes

• Supported formats: PNG, JPG/JPEG, SVG
• Maximum file size: 5MB
• Recommended dimensions: At least 200x200 pixels for optimal display
• Aspect ratio: 1:1 (square) is recommended

Response

{
  "status": "success",
  "data": {
    "chatbot": {
      "id": "chatbot_456def",
      "icon_url": "https://assets.nexvio.ai/chatbots/chatbot_456def/icon.png?v=1626345678",
      "updated_at": "2023-07-17T10:45:23Z"
    }
  }
}

Error Responses

Authentication Error

{
  "status": "error",
  "error": {
    "code": "unauthorized",
    "message": "Invalid API key"
  }
}

Not Found Error

{
  "status": "error",
  "error": {
    "code": "not_found",
    "message": "Chatbot not found"
  }
}

Validation Error

{
  "status": "error",
  "error": {
    "code": "validation_error",
    "message": "Invalid file",
    "details": {
      "file": "File too large. Maximum size is 5MB."
    }
  }
}

File Format Error

{
  "status": "error",
  "error": {
    "code": "invalid_file_format",
    "message": "Unsupported file format. Please upload a PNG, JPG, or SVG file."
  }
}

Image Processing

When you upload an icon, the following processing occurs automatically:

1. The image is validated for format and size
2. If necessary, the image is resized to create appropriate versions for different devices
3. The image is optimized for web delivery
4. The previous icon (if any) is replaced

Design Tips

For the best appearance across devices:

1. Use a simple, recognizable design that works well at small sizes
2. Ensure sufficient contrast against different background colors
3. If using a PNG with transparency, ensure the transparent areas work well on both light and dark backgrounds
4. Test how your icon looks at small sizes, as it will appear smaller on mobile devices

Code Examples

cURL

curl -X POST "https://api.nexvio.ai/v1/chatbots/chatbot_456def/icon" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -F "file=@/path/to/your/icon.png"

JavaScript (with FormData)

// HTML Form
// <input type="file" id="iconFile" accept="image/png,image/jpeg,image/svg+xml">

const fileInput = document.getElementById('iconFile');
const file = fileInput.files[0];
const formData = new FormData();
formData.append('file', file);

const chatbotId = 'chatbot_456def';
const response = await fetch(`https://api.nexvio.ai/v1/chatbots/${chatbotId}/icon`, {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY'
    // Don't set Content-Type here, it will be set automatically with boundary
  },
  body: formData
});

const data = await response.json();
console.log(data);

Python (with requests)

import requests

chatbot_id = "chatbot_456def"
url = f"https://api.nexvio.ai/v1/chatbots/{chatbot_id}/icon"
headers = {
    "Authorization": "Bearer YOUR_API_KEY"
    # Don't set Content-Type here, it will be set automatically with boundary
}

with open('/path/to/your/icon.png', 'rb') as f:
    files = {'file': ('icon.png', f, 'image/png')}
    response = requests.post(url, headers=headers, files=files)

data = response.json()
print(data)

Node.js (with form-data)

const FormData = require('form-data');
const fs = require('fs');
const axios = require('axios');

const chatbotId = 'chatbot_456def';
const form = new FormData();
form.append('file', fs.createReadStream('/path/to/your/icon.png'));

axios.post(`https://api.nexvio.ai/v1/chatbots/${chatbotId}/icon`, form, {
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    ...form.getHeaders()
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('Error uploading icon:', error.response?.data || error.message);
});