How to Place a User in a Specific Position

When making API requests to position users, the ordering of parameters is crucial for correct participant placement. This is particularly important for complex custom layouts that require precise control over where each user appears.

Figure 1. A numbered grid showing the present-vertical-9 layout positions.

The code examples below demonstrate positioning a participant in the second position (index 1). This layout system supports empty spots through the use of an arbitrary placeholder value. In the example implementation, placeholders are used in multiple positions including the first spot, allowing the background image shown in Figure 1 to remain visible in those locations.

bash

export ACCESS_KEY=123...
export USER_ID1=123...

curl -X POST \
  -d "users[]=_placeholder" \
  -d "users[]=$USER_ID1" \
  -d "users[]=_placeholder" \
  -d "users[]=_placeholder" \
  -d "users[]=_placeholder" \
  -d "users[]=" \
  -d "users[]=_placeholder" \
  -d "users[]=" \
  -d "users[]=_placeholder" \
  -d "layout=auto" \
  -d "name=present-vertical-9" \
  "https://api.eyeson.team/rooms/$ACCESS_KEY/layout"

shell

SET ACCESS_KEY=123...
SET USER_ID1=123...

curl -X POST ^
  -d "users[]=_placeholder" ^
  -d "users[]=%USER_ID1%" ^
  -d "users[]=_placeholder" ^
  -d "users[]=_placeholder" ^
  -d "users[]=_placeholder" ^
  -d "users[]=" ^
  -d "users[]=_placeholder" ^
  -d "users[]=" ^
  -d "users[]=_placeholder" ^
  -d "layout=auto" ^
  -d "name=present-vertical-9" "https://api.eyeson.team/rooms/%ACCESS_KEY%/layout"

node

import fetch, { FormData } from 'node-fetch';

const ACCESS_KEY = '123...';
const USER_ID1 = '123...';

const url = 'https://api.eyeson.team/rooms/' + ACCESS_KEY + '/layout';

const formData = new FormData();
formData.append('users[]', '_placeholder');
formData.append('users[]', USER_ID1);
formData.append('users[]', '_placeholder');
formData.append('users[]', '_placeholder');
formData.append('users[]', '_placeholder');
formData.append('users[]', '');
formData.append('users[]', '_placeholder');
formData.append('users[]', '');
formData.append('users[]', '_placeholder');
formData.set('layout', 'auto');
formData.set('name', 'present-vertical-9');

await fetch(url, { method: 'POST', body: formData });

Figure 2. The result in the eyeson UI may look like this.

For the sake of clarity in Figure 3, four participants are added to the session. The last two are not visible in this case. Also the user names are blended out with show_names=false while changing the layout.

bash

export ACCESS_KEY=123...

curl -X POST \
  -d "show_names=false" \
  "https://api.eyeson.team/rooms/$ACCESS_KEY/layout"

shell

SET ACCESS_KEY=123...

curl -X POST ^
  -d "show_names=false" "https://api.eyeson.team/rooms/%ACCESS_KEY%/layout"

node

import fetch from 'node-fetch';

const ACCESS_KEY = '123...';
const url = 'https://api.eyeson.team/rooms/' + ACCESS_KEY + '/layout';
const body = 'show_names=false';

await fetch(url, { method: 'POST', body });

Figure 3. To visualise the invisible participants, here is an image of set up with an UI.

You can also move around the participants as you wish like this.

Figure 4. Same layout but the first participant is up a spot.