Assistant iFrame and Script Integration
3. Assistant iFrame and Script Integration
The iFrame or Script method allows you to use an assistant directly within a website or web application.
After selecting the integration method, use Get Started to proceed with the configuration.
3.1. Display Mode
The assistant can be displayed on the web page in Bubble or Container mode.
Bubble displays the assistant as a component that users can open and close on the page.
Container displays the assistant interface permanently within a specific section of the web page.
You can switch between the two display modes in the Preview area on the right and review your changes.
3.2. File and Image Upload
The File Upload option allows users to upload files through the assistant.
The Image Upload option allows users to upload images through the assistant.
You can enable or disable these options depending on the assistant's use case.
3.3. Customizing the Appearance
The assistant's appearance on the web page can be configured using various options.
Remove Title hides the title area in the assistant interface.
Remove Shadows removes the shadow effect around the component.
Large Container provides a wider interface when using the Container display mode.
Remove Rounded Corners makes the corners of the component square.
Reduce Message Input Size displays the message input area in a more compact format.
Scrolling Option configures the scrolling behavior of the content area.
Show Branding determines whether branding information is displayed in the assistant interface.
3.4. Title and Logo Position
The Change Title and Logo Position option allows you to change the horizontal position of the assistant title and logo.
This setting allows the assistant's appearance to be adapted to the existing design of the website.
3.5. Saving Changes
You can review your changes in the Preview area on the right.
After completing the configuration, select Save Changes.
Unsaved changes may not be reflected in the live integration or deployment code.
3.6. Deployment with iFrame
To use the iFrame integration:
- Go to the Deploy step.
- Select the Bubble or Container display mode you want to use.
- Copy the iFrame code generated by SkyStudio.
- Add the code to the area of your website where you want the assistant to appear.
3.7. Deployment with Script
To use the Script integration, copy the Script code generated by SkyStudio and add it to the relevant web application.
The Script method can be particularly useful for dynamic on-page integrations such as the Bubble display mode.
Do not modify the key or identifier values in the code generated by SkyStudio. Changing these values may cause the integration to stop working.