2️⃣ Select Widget Design Variants
Customize the look and feel of the widget to match the design of your website
BlockBot Widget comes in three variants - large, compact, and qrcode. Variants provide a way to optimize the presentational style of the Widget for the space available in your application.
Variants
largevariant
<iframe src="https://useblockbot.com/widget/api/v1?type=large&theme=light" style="height: 600px; width: 500px; border-radius: 20px; box-shadow: 0px 0px 15px 1px #00000021;" frameborder="0"></iframe>You will notice the type is set to large. Also, the Iframe width = 600px & height = 500px. This ensures the widget component fits within the Iframe, but you can customize it to your preference. This variant is the maximum widget size, and it can be fully expanded to fit the size of a page.
compactvariant
<iframe src="https://useblockbot.com/widget/api/v1?type=compact&theme=light" style="width: 300px; height: 300px; border-radius: 20px; box-shadow: 0px 0px 15px 1px #00000021;" frameborder="0"></iframe>You will notice the type is set to compact. Also, the Iframe width = 300px & height = 300px. This ensures the widget component fits within the Iframe and has a clean look, but you can customize it to your preference. This variant is a mini widget, and it can be used when there's not much space on your website.
qrcodevariant
<iframe src="https://useblockbot.com/widget/api/v1?type=qrcode&theme=light" style="width: 400px; height: 400px; border-radius: 20px; box-shadow: 0px 0px 15px 1px #00000021;" frameborder="0"></iframe>You will notice the type is set to qrcode. Also, the Iframe width = 400px & height = 400px. This displays the QR code within the Iframe and a little padding for the container background, but you can customize the width and height to your preference (e.g., 300px * 300px). This variant only displays a QR code whose URL link redirects to BlockBot WhatsApp bot.
Last updated