Welcome to the iframe tutorial!
This tutorial assumes you have already completed the Getting Started with WidgetBot tutorial. If you have not, please read it and invite the bot.
If you need any assistance adding WidgetBot, please ask in the server. However, please make sure you mention what the issue is, send your code in a codeblock (
```), include your server and channel IDs, and optionally include a link to your site.
To get started, add the following code where you want the widget to display.
<iframe src="https://e.widgetbot.io/channels/299881420891881473/355719584830980096" allow="clipboard-write; fullscreen" height="600" width="800"></iframe>
If you run your site with this code, you should see the widget, showing the official WidgetBot server.
Setting your server
The WidgetBot URL has the following format:
In the example code, the SERVERID is
299881420891881473 and the CHANNELID is
To set it to your server, you must change the Server ID and Channel ID.
You can get your URL by right-clicking the channel in Discord, clicking Copy Link, and editing
e.widgetbot.io. Alternatively, you can manually get the IDs and create the URL:
You can get the Server and Channel IDs from Discord: Go to the Appearance tab in User Settings, and turn on Developer Mode. Then, right-click the server icon or channel and click
The Channel ID you choose will be the default channel that will show when the widget loads. However, the user can switch the channel.
Once you set the Server ID and Channel ID, the widget should now show your server.
You have successfully set up WidgetBot.