Upload Chatbot Profile Picture

Upload Chatbot Profile Picture

This endpoint allows you to upload or update the profile picture for a chatbot. The profile picture is displayed in the header of the chat window when users are interacting with the chatbot.

Endpoint

POST https://api.nexvio.ai/v1/chatbots/{chatbotId}/profile-picture

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, WebP
• Maximum file size: 5MB
• Recommended dimensions: At least 400x400 pixels for optimal display
• Aspect ratio: 1:1 (square) is recommended. Non-square images will be cropped to a square

Response

{
  "status": "success",
  "data": {
    "chatbot": {
      "id": "chatbot_456def",
      "profile_picture_url": "https://assets.nexvio.ai/chatbots/chatbot_456def/profile.jpg?v=1626345678",
      "updated_at": "2023-07-17T11:30:45Z"
    }
  }
}

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 WebP file."
  }
}

Image Processing

When you upload a profile picture, the following processing occurs automatically:

1. The image is validated for format and size
2. The image is processed to create appropriate versions for different screen sizes
3. If the image is not square, it will be center-cropped to a square format
4. The image is optimized for web delivery
5. The previous profile picture (if any) is replaced

Design Tips

For the best appearance:

1. Use a high-quality image that is clearly recognizable even at smaller sizes
2. For avatar/character-based chatbots, consider using a close-up of the character’s face
3. For brand-based chatbots, use your company logo or an appropriate brand representative
4. Ensure good contrast against the chatbot header background
5. Avoid using images with text, as any text may be difficult to read at smaller sizes

Code Examples

cURL

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

JavaScript (with FormData)

// HTML Form
// <input type="file" id="profilePicture" accept="image/png,image/jpeg,image/webp">

const fileInput = document.getElementById('profilePicture');
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}/profile-picture`, {
  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}/profile-picture"
headers = {
    "Authorization": "Bearer YOUR_API_KEY"
    # Don't set Content-Type here, it will be set automatically with boundary
}

with open('/path/to/your/profile.jpg', 'rb') as f:
    files = {'file': ('profile.jpg', f, 'image/jpeg')}
    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/profile.jpg'));

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

UI Implications

Uploading a profile picture affects the following aspects of your chatbot’s appearance:

1. The chatbot header in the chat window will display this image
2. If your chatbot sends messages in embedded interfaces (like Slack or MS Teams), this profile picture may be used as the sender avatar
3. The profile picture helps users identify and personify your chatbot, increasing engagement