My Chatsimple
  • Chatsimple website
  • ✨Add Chatsimple to Your Website
    • General Websites
    • Google Tag Manager
    • Google Tag Manager Integration
    • Go Daddy
    • WordPress
    • Webflow
    • Wix
    • Shopify
    • Show only for Specific Pages, Countries, Times or Subset of visitors
    • Google Sites
  • Connect Chatsimple to your CRM
    • Pipedrive Integration
    • Zoho Integration
    • HubSpot Integration
    • Zapier API documentation
  • Viewing 'Original Source' / UTM Info
  • 🎨Widget specifics
    • Widget Customization
    • Block Chat Interface (<iframe>)
    • Common Questions and Answers
    • ?
  • πŸ’ͺUNLOCK FULL POWER OF CHATSIMPLE
    • βš™οΈConfigure Chatsimple - AI Nav
    • πŸ‘©β€πŸŽ¨Personalize look and feel
    • πŸ‘ŸTrain your AI chatbot
    • πŸ—£οΈContent creation
    • ⛓️Facebook integration
    • πŸ›ƒIntegrate with Hubspot
    • πŸ“ŠDashboard and Insights Update
    • πŸ₯‡Get better google search rankings
    • πŸ‘¨β€πŸ’ΌLead Capture Qualification Followup with personalized email
    • ⏰Book MORE meetings with Calendly integration
    • πŸŽ™οΈAI Copilot with Voice Search
  • Improving Response Quality
    • πŸ–ŒοΈFinetune your Agent's Responses
    • 🏌️Set your business goals
    • πŸͺžMirror brand personality
  • Contact
    • Email
Powered by GitBook
On this page
  • Install Block Chat Interface on General Websites
  • Step 1: Access Your Dashboard
  • Step 2: Locate and Copy the Code
  • Step 3: Dive into Detailed Customizations
  • Step 4: Insert the Modified Code
  • Step 5: Verification
  • πŸŽ‰ Voila!
  1. Widget specifics

Block Chat Interface (<iframe>)

Embed AI chatbot as a block and customize however you want it.

PreviousWidget CustomizationNextCommon Questions and Answers

Last updated 1 year ago

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 () 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.

🎨
Chatsimple Dashboard
https://app.chatsimple.ai