# addCustomTile()

Adds a custom tile as a **first** or **last** position in the tiles list. You defined the content of the tile with the **html** property. Name is the title of the tile.

{% hint style="info" %}
The custom tile is always shown on the current page at your chosen position (first or last).
{% endhint %}

{% hint style="warning" %}
The method must be called after you have joined the room. It won't do anything if the room hasn't loaded yet. 
{% endhint %}

In the below example a custom AI tile is added to the stage.

```javascript
sambaFrame.on('userJoined', (event) => {
   const data = event.data;
   if (data.type === 'local') {
     sambaFrame.addCustomTile({
        "name": "AI", 
        "html": '<img src="https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExdjR5YjF5dWQ4d2d2NzI5eHFyYmxyczgydzRuZ2JwZ2F4MTliaGo2bCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/MHMO7iYMt6pJrEpKNB/giphy.gif"/>',
        "position": "last"
     });
   }
});
```

{% hint style="info" %}
This method is often used in conjunction with [removeCustomTile()](https://docs.digitalsamba.com/reference/sdk/methods/removecustomtile) and [sendMessageToCustomTile()](https://docs.digitalsamba.com/reference/sdk/methods/sendmessagetocustomtile).
{% endhint %}