Skip to main content

Assistant Integration Guide

There are two simple ways to integrate the assistant into your website:

  • iFrame Method
  • Script Method

Assistant Integration with the Iframe Method​

1. Log In to SkyStudio Go to the "Integration" page in the admin panel.

2. Select Your Assistant Select the assistant you want to integrate from the list.

3. Configure the Appearance and Customization

First Step: Choosing the Layout​

Bubble/Container Selection: Decide whether the assistant will appear as a chat bubble or as a full-page container.

  • Bubble: It sits as an icon in the corner of the website and opens a chat window when clicked.
  • Container: It is displayed as a full-screen chat window. Image Upload: Allows the user to add images to the chat.

Second Step: Appearance Customization​

Brand Identity: Add a logo to the assistant.

Typography: Decide on the appearance of the text by choosing the font and size.

Color Customization​

  • User Text Color: Sets the color of the text the user writes.
  • User Background Color: Sets the background color of the user's text.
  • Assistant Text Color: Sets the text color used in the assistant's responses.
  • Assistant Background Color: Sets the background color of the assistant's text.
  • Header Text Color: Sets the color of the header text in the chat window.
  • Background Color: Sets the general background color.
  • Header Background Color: Sets the background color of the header section.
  • Bubble Color: Sets the color of the chat bubble.
  • Message Input Area Color: Sets the background color of the box where text is entered.
  • Message Input Area Text Color: Sets the color of the text written in the text box.
  • Button Background Color: Sets the background color of the suggested texts.
  • Button Text Color: Sets the color of the suggested texts.
  • Button Effect Color: Sets the background color that changes when hovering over the text.
  • Button Hover Text Color: Sets the text color that changes when hovering over the text.

Layout Settings​

  • Remove Header: Hides the header in the chat interface.
  • Large-Size Container: Makes the chat window full screen.
  • Remove Rounded Corners: Makes all corners sharp.
  • Remove Shadows: Removes the shadow effects.
  • Shrink the Message Input Area: Shrinks the text input area.
  • Show Brand Information: Displays the "Powered by SkyStudio" text.

Bubble Settings​

  • Bubble Size: Sets the size of the chat bubble. (Small, Medium, Large)
  • Show Bubble Message: Displays short messages on the bubble.
  • Bubble Messages: You can display specific messages in sequence.
  • Add Message: You can define new messages.
  • Bubble Duration: Set how long the messages will be visible. (Default: no time limit)
  • Message Content: A maximum of 50 characters of text can be entered for each message.
  • Delay Time (seconds): Define the display delay of each message. (for example: 0s)
  • Message Background Color
  • Message Text Color
  • Bubble Message Font Size: Can be set in px (e.g., 15 px) 4. Save the Changes Save all the settings you have made. 5. Copy the Script Code Copy the script code provided by SkyStudio.

6. Add the Code to Your Website

  • For classic HTML sites: Paste the script code into your HTML file, right before the <body> tag closes.
  • For website builders (WordPress, Wix, Shopify, Squarespace, etc.): Add it to the theme editor or the "Custom Code" sections. You can use "Custom HTML" components or code-injection plugins.
  • For web applications: You can integrate it into your frontend files or inside the relevant components. 7. Save Your Page Save or publish the changes you have made. 8. Test It View your website in a browser to check that the assistant is working correctly.

Final Checks​

Test All Features: Make sure the assistant works smoothly on different devices and browsers.

Mobile Compatibility: Check that the assistant looks and works well on mobile devices too.

Visual Adjustments: Are the assistant's position, colors, and sizes the way you want them? If necessary, you can edit them in SkyStudio and save again.