Uploading Icons and Logos

To add icons and logos to a theme, they first need to be uploaded to the Meetings API AWS bucket, and then paired with the respective theme. You should also ensure that your Logos and Favicons adhere to the Image Requirements below.

Requirements

The type of images should be uploaded based on the background color. Colored images should be used for a light background, while a lighter image should be used on a dark background.

Logo requirements:

Format: PNG
Maximum size: 1MB
Dimensions: 1 px - 300 px
Background must be transparent

Favicon requirements:

Format: PNG
Maximum size: 1MB
Dimension: 16 x 16 - 32 x 32 and must be square
Background must be transparent

Logo upload

Unlike Server SDKs, the process requires 3 steps with cURL.

1. Retrieve Upload Credentials

Example Request

Use a GET request to retrieve the credentials needed to upload your images to AWS. The response will contain objects for each favicon, light logo, and colored logo, and the Policy will be your JWT. Grab the values for the image type you wish to upload.

curl -X GET https://api-eu.vonage.com/v1/meetings/themes/logos-upload-urls \ -H "Authorization: Bearer "$JWT

Example Response

{
  "url": "https://s3.amazonaws.com/roomservice-whitelabel-logos-prod",
  "fields": {
    "Content-Type": "image/png",
    "key": "auto-expiring-temp/logos/white/a2ef0569-7d2c-4297-b0dd-1af6d8b61be6",
    "logoType": "white",
    "bucket": "roomservice-whitelabel-logos-prod",
    "X-Amz-Algorithm": "AWS4-HMAC-SHA256",
    "X-Amz-Credential": "ASIA5NAYMMB6AP63DGBW/20220410/us-east-1/s3/aws4_request",
    "X-Amz-Date": "20220410T200246Z",
    "X-Amz-Security-Token": "XXXXX",
    "Policy": "XXXXX",
    "X-Amz-Signature": "fcb46c1adfa98836f0533aadebedc6fb1edbd90aa583f3264c0ae5bb63d83123"
  }
}

2. Upload Your File to AWS

Copy all values from the response above for the image type you wish to upload, and paste them in the body of this request. Add the file path to your image as well.

curl -X POST 'https://s3.amazonaws.com/roomservice-whitelabel-logos-prod' \ --H 'Content-Type: multipart/form-data' \ -F 'Content-Type="image/png"' \ -F 'key="auto-expiring-temp/logos/white/a2ef0569-7d2c-4297-b0dd-1af6d8b61be6"' \ -F 'logoType="white"' \ -F 'bucket="roomservice-whitelabel-logos-prod"' \ -F 'X-Amz-Algorithm="AWS4-HMAC-SHA256"' \ -F 'X-Amz-Credential="ASIA5NAYMMB6AP63DGBW/20220410/us-east-1/s3/aws4_request"' \ -F 'X-Amz-Date="20220410T194523Z"' \ -F 'X-Amz-Security-Token="XXXXX"' \ -F 'Policy="XXXXX"' \ -F 'X-Amz-Signature="fcb46c1adfa98836f0533aadebedc6fb1edbd90aa583f3264c0ae5bb63d83123"' \ -F 'file=@"{PATH_TO_FILE}"'

This will return a 204 if successful. If you get an error like "Check your key and signing method", check the spaces and formatting of the message body.

3. Add Keys to Theme

Use the theme ID of the theme you wish to update, along with the key used in the previous step, to link the logo with the theme that you wish to update. You can even make multiple upload calls, and then pass multiple keys to the theme update.

Once the images are associated with a theme, you'll be able to see their details reflected in the response of a theme GET. The brand_image_colored_url, brand_image_white_url and branded_favicon_url values will contain the AWS Bucket Key, and their respective URLs will point to the image itself.

curl -X PUT 'https://api-eu.vonage.com/v1/meetings/themes/e8b1d80b-8f78-4578-94f2-328596e01387/finalizeLogos' \ -H 'Content-Type: application/json' \ -H 'Authorization: Bearer '$JWT \ -d '{ "keys": [ "{white-logo-key}", "{colored-logo-key}", "{favicon-key}" ] }'

const credentials = new Auth({
    privateKey: VONAGE_APPLICATION_PRIVATE_KEY_PATH,
    applicationId: VONAGE_APPLICATION_ID,
});
const options = {};

const meetingsClient = new Meetings(credentials, options);
await meetingsClient.uploadIcon("00c3efdf-1cd1-45d6-9379-c5420571d654", LogoType.WHITE,  "/path/to/image.png");

Our SDKs make it easy by exposing a single method to call.

var client = VonageClient.builder()
    .applicationId(VONAGE_APPLICATION_ID)
    .privateKeyPath(VONAGE_PRIVATE_KEY_PATH)
    .build();
client.getMeetingsClient().updateThemeLogo(
    UUID.fromString("00c3efdf-1cd1-45d6-9379-c5420571d654"),
    LogoType.WHITE,
    Paths.get("/path/to/image.png")
);

Our SDKs make it easy by exposing a single method to call.

Key	Description
`JWT`	Used to authenticate your request. See Authentication for more information, including how to generate a JWT.
`VONAGE_APPLICATION_ID`	The Vonage Application ID.
`VONAGE_APPLICATION_PRIVATE_KEY_PATH`	Private key path.
`THEME_ID`	The theme UUID.
`THEME_LOGO_TYPE`	Indicates the type of the logo. Must be one of `white`, `colored` or `favicon`.
`LOGO_FILEPATH`	Local path to the logo.

var credentials = Credentials.FromAppIdAndPrivateKeyPath(applicationId, privateKeyPath);
var client = new VonageClient(credentials);
var request = UpdateThemeLogoRequest.Parse(new Guid("00c3efdf-1cd1-45d6-9379-c5420571d654"),
    ThemeLogoType.White, @"C:\image.png");
var response = await client.MeetingsClient.UpdateThemeLogoAsync(request);

$keypair = new Vonage\Client\Keypair(
    VONAGE_APPLICATION_PRIVATE_KEY_PATH
    VONAGE_APPLICATION_ID,
);

$client = new Vonage\Client($keypair);

$client->meetings()->uploadImage(
    '00c3efdf-1cd1-45d6-9379-c5420571d654',
    './images/tmp/logo.png',
    'white'
);

Our SDKs make it easy by exposing a single method to call.

client = vonage.Client(
    application_id=VONAGE_APPLICATION_ID,
    private_key=VONAGE_APPLICATION_PRIVATE_KEY_PATH,
)

client.meetings.upload_logo_to_theme(
    theme_id='00c3efdf-1cd1-45d6-9379-c5420571d654',
    path_to_image='/images/logo.png',
    logo_type='white',
)

Our SDKs make it easy by exposing a single method to call.

client = Vonage::Client.new(
  application_id: ENV["VONAGE_APPLICATION_ID"],
  private_key: File.read(ENV["VONAGE_APPLICATION_PRIVATE_KEY_PATH"])
)

client.meetings.themes.set_logo(
  theme_id: "00c3efdf-1cd1-45d6-9379-c5420571d654",
  filepath: "/images/logo.png",
  logo_type: "white"
)

Reference

Meetings API Reference