After creating and setting up your Assistant, you can either follow our instructions in the "Guide for Embedded Chat HTML" found under the "Customization" tab of your AI Assistant settings, or you can follow these steps to embed the Embedded Chat into your website or webpage:
Step 1: Copy Code Snippet for the Embedded Chat
Log in to https://app.noform.ai/sign-in.
Click on your Assistant to open its settings
Go to the "Customization" tab
Open the "Installation" tab
Select "Embedded chat" and click "Copy code" to copy your Assistant's chat code snippet.
📝 A snippet is a JavaScript <script> element that will load and display the chat bubble on your website.
Step 2. Paste the Code Snippet into Your HTML File
Open the HTML file where you want the chat feature to appear in a text editor.
Locate the position within the HTML code where you want the chat to be embedded. This will typically be within the
<body>tags of your HTML.Paste the copied iframe code snippet at the chosen location.
Step 3. Customize the Style (Optional)
The snippet includes inline styling that sets the minimum and maximum width to 100% and the height to 418 pixels. You can adjust these styles to fit the design of your webpage.
Step 4. Save Your HTML File
Save your HTML file after pasting and (optionally) adjusting the snippet.
Step 5. Upload Your HTML File
You can open your webpage in a web browser to confirm that the chat bubble appears in the bottom right corner.
You can test the functionality by clicking on the chat bubble to ensure the chat interface opens and is operational.
Step 6. Test the Embedded Chat.
Once your updated webpage is live, you can test the embedded chat to make sure it's functioning correctly. It should appear as an inline element on your page, allowing visitors to interact with the chat without leaving your website.
Customization options:
1. Width and Height: You can set specific width and height dimensions to make the chat iframe larger or smaller. This is done using the width and height attributes in the iframe tag or through CSS.
htmlCopy code
<iframe style="width: 600px; height: 400px;"></iframe>
Alternatively, you could use percentages to make the iframe responsive to the size of its container element.
htmlCopy code
<iframe style="width: 100%; height: 75vh;"></iframe>
📝 Here, vh stands for viewport height, which is responsive to the browser window size.
2. Border: The style snippet provided sets border: none; to ensure that the iframe does not have a visible border around it. If you prefer a border, specify its width, style, and color.
htmlCopy code
<iframe style="border: 1px solid #ccc;"></iframe>
📝This will add scrollbars to the iframe when the content is larger than the frame.
3. Overflow: To handle the content that might exceed the dimensions of the iframe, you can use the overflow property.
htmlCopy code
<iframe style="overflow: auto;"></iframe>
📝This will add scrollbars to the iframe when the content is larger than the frame.
4. Background: You can set a background color or image for the iframe, which can be helpful if there is a delay in loading the content.
htmlCopy code
<iframe style="background: url('loader.gif') no-repeat center center;"></iframe>
5. Positioning: To place the iframe precisely on your webpage, you can use properties like position, top, right, bottom, and left.
htmlCopy code
<iframe style="position: absolute; top: 50px; left: 100px;"></iframe>
6. Box Shadow: Add a shadow around the iframe to make it stand out or to match your site’s design aesthetics.
htmlCopy code
<iframe style="box-shadow: 2px 2px 10px rgba(0,0,0,0.5);"></iframe>
7. Border Radius: If you want the iframe to have rounded corners, use the border-radius property.
htmlCopy code
<iframe style="border-radius: 10px;"></iframe>
8. Opacity: You can change the transparency of the iframe with the opacity property.
htmlCopy code
<iframe style="opacity: 0.9;"></iframe>
📝Remember, these styles can be added directly to the style attribute within the iframe tag, or preferably, for maintainability and separation of concerns, they can be added within a <style> tag or an external stylesheet. This separation of HTML and CSS makes it easier to manage and update the styles without altering the HTML structure.