Expertise Knowledge Base

   Embedding on your website  Embedding the Widget as an iFrame

Embedding the Widget as an iFrame

Customizing the appearance of the widget iFrame.

Last updated on September 7, 2025

Install Block Chat Interface on General Websites

Welcome to the Block Chat Interface installation guide! Embed our chatbot widget into your site as a stylish block and enjoy comprehensive customization options for height, width, shadow, shape, positioning, and more.
 

Step 1: Access Your Dashboard

Visit the Chatsimple Dashboard to find the unique script for embedding the chatbot on your site.
 

Step 2: Locate and Copy the Code

In the “Add to Website” section of the dashboard, click the “Alternative” button to copy the code to your clipboard. The code looks like this:
<iframe src="https://app.chatsimple.ai/iframe23/.../.../..."
	height="400"
	width="800"
	title="Chatsimple"
	style="display:block;margin-left:auto;margin-right:auto;border:none;border-radius:20px;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);">
	</iframe>
 

Step 3: Dive into Detailed Customizations

You can adjust the overall look and position of your Block Chat Interface by changing the following in the code you copied.

Dimension Adjustments

Height and Width: To control the height and width of the chatbot widget, modify the height and width attributes in the iframe.
For example:
  • Standard: height="400" and width="800".
  • Compact: height="300" and width="600".
 

Border & Shape

Border Color & Width: If you'd like to add a border, use the border property.
For example:
  • Thin red border: border: 1px solid red;
  • Thick blue border: border: 5px solid blue;
Shape: Use the border-radius property to adjust the widget's curvature.
For example:
  • Square (No Curves): border-radius: 0;
  • Slight Curve: border-radius: 10px;
  • Heavy Curve: border-radius: 20px;
 

Shadows & Depth

Shadow: The box-shadow property allows you to give a 3D appearance to your widget.
For example:
  • No Shadow: box-shadow: none;
  • Deep Shadow: box-shadow: 0px 12px 24px 0px rgba(0,0,0,0.4);
  • Light Shadow: box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.1);
 

Positioning & Spacing

Horizontal Position: Adjust margin-left and margin-right for horizontal control.
For example:
  • Center: margin-left: auto; margin-right: auto;
  • Left Aligned: margin-left: 0;
  • Right Aligned: margin-right: 0;
Vertical Spacing: Control space above or below the widget using margin-top and margin-bottom.
For example:
  • Space above: margin-top: 20px;
  • Space below: margin-bottom: 20px;
 
Additional Styling
Opacity: If you want the widget to be slightly transparent, you can use the opacity property.
For example:
  • 50% transparent: opacity: 0.5;
  • 75% visible: opacity: 0.75;
 

Step 4: Insert the Modified Code

After tailoring the iframe code to your preferences, embed it in the preferred spot on your website. Ensure you place it in the section where you'd like the chatbot widget to manifest.
 

Step 5: Verification

Post adjustments, save all modifications, then navigate to your website. Confirm that the Block Chat Interface widget is appearing as intended and in line with your tweaks.
 
🎉 Voila!
 
Congratulations! You've not only integrated the Block Chat Interface but also customized it to perfection. Now, your site visitors can relish an impeccable chat experience, precisely molded to your design inclinations.