feat(AI-130): added chatbot instruction (#16)

apps/spa/src/app/modules/+chat/containers/chat-example/chat-example.component.html

@@ -1,7 +1,34 @@
 <h1>
-  How to add a chatbot to the website?
+  Integrating Chatbot into Your Website
 </h1>
 
-Please copy the code provided below and paste it into your HTML file.
+<p class="paragraph">
+  Enhance your website's interactivity and user engagement by seamlessly integrating our chatbot. Follow the simple steps below to implement the chatbot into your website:
+</p>
+
+<h2>
+  Step 1: Locate Your HTML File
+</h2>
+
+<p class="paragraph">
+Identify the HTML file where you wish to add the chatbot. This will typically be in the root directory of your website or within a specific subdirectory if you aim to integrate the chatbot on a particular page.
+</p>
+
+<h2>
+  Step 2: Copy the Chatbot Integration Code
+</h2>
+
+<p class="paragraph">
+  Below is the chatbot integration code snippet. This piece of code is designed to be lightweight and compatible with most web environments, ensuring a smooth integration process.
+  <markdown [data]="markdown"></markdown>
+</p>
+
+
+<h2>
+  Step 3: Paste the Code into Your HTML File
+</h2>
+<p class="paragraph">
+  Open your HTML file using a text editor of your choice. Scroll to the part of the file where you want the chatbot to appear. It's recommended to place the code just before the closing body tag to ensure the chatbot loads after all other content on your page, improving the page load time.<br><br>
+  Paste the copied code snippet into the file at the chosen location.
+</p>
 
-<markdown [data]="markdown"></markdown>

apps/spa/src/app/modules/+chat/containers/chat-example/chat-example.component.scss

@@ -4,9 +4,24 @@
   display: flex;
   flex-direction: column;
   gap: $size-2;
-  max-width: 600px;
-  font-size: 16px;
+  max-width: 650px;
+  font-size: 15px;
   margin: 0 auto;
   padding: 40px 20px;
+  color: var(--color-grey-500);
+}
+
+p.paragraph {
+  margin-bottom: 20px;
+}
+
+h1 {
+  color: var(--color-grey-600);
+}
+
+h2 {
   color: var(--color-grey-600);
+  margin-bottom: 10px;
+  font-weight: 400;
+  font-size: 18px;
 }