> For the complete documentation index, see [llms.txt](https://docs.makerobos.com/frontman-enterprise-chatbot-platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.makerobos.com/frontman-enterprise-chatbot-platform/publish/embed-frontman.md).

# Embed Frontman

This documentation guides you through embedding the Frontman widget onto your website, enabling users to interact with your product directly within your existing platform.

### Let's learn how to use- 

1. **Obtain the Frontman Script:**
   * Access your Makerobos dashboard and navigate to the Frontman configuration section.
   * Locate the script specifically designed for embedding.
2. **Enable Embedded Frontman:**
   * Within the provided script, identify the section referencing `data-container`.
   * Replace `mkos_embed_container` with your desired container ID. This ID must begin with a letter (A-Z) or underscore (\_) and cannot contain special characters.

     <figure><img src="https://3746379134-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FamP4egBrOsuezKyj1NQl%2Fuploads%2Fo01zu5dErCe9QOE32Z26%2FWhatsApp%20Image%202024-06-20%20at%201.59.08%20PM.jpeg?alt=media&amp;token=f8a98b7f-c05e-45c5-869c-883478ac86bd" alt=""><figcaption></figcaption></figure>
3. **Embed the Script:**
   * Copy the entire script provided by Makerobos.
   * Paste the copied script into your website's HTML code, specifically within the designated container element with the ID you defined in step 2 (e.g., `<div id="xyz_embed_container"></div>`).

### **Example Code:**

HTML

<figure><img src="https://3746379134-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FamP4egBrOsuezKyj1NQl%2Fuploads%2Fvcn160b0U0zlxKgyPX62%2FScreenshot_201.png?alt=media&amp;token=a197da7b-4db7-44d5-bc4c-ef85ea073698" alt=""><figcaption></figcaption></figure>

```html
<script 
    type="text/javascript" 
    data-token="IQFVG9VY3GTN6MB9" 
    data-container="main_embed_container" 
    src="https://link.makerobos.com/EmbedDevJS">
</script>
```

<figure><img src="https://3746379134-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FamP4egBrOsuezKyj1NQl%2Fuploads%2Fm8fbxihjUhgK9x5VB34m%2FScreenshot_202.png?alt=media&amp;token=dd5930b0-1016-4561-a769-29028ab149d2" alt=""><figcaption></figcaption></figure>

### **Chat Settings (Optional):**

* **Begin with New Conversation:** Frontman may offer configuration options within the embed settings to manage conversation behavior (e.g., always starting a new conversation). Refer to the Frontman documentation for details on available customization options.
* **Restart Button:** Similarly, Frontman might allow enabling a restart button for users to reset the conversation. Explore the Frontman documentation for instructions on implementing this feature.

<figure><img src="https://3746379134-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FamP4egBrOsuezKyj1NQl%2Fuploads%2FXLuuc9cYP1V347kZqWK5%2FScreenshot_203.png?alt=media&amp;token=8d4d6eef-2c12-4cab-87b0-371f08573012" alt=""><figcaption></figcaption></figure>

### **Testing:**

* Once the script is embedded, preview your website to ensure the Frontman widget appears within the designated container element.
* Test the functionality of the embedded Frontman by initiating a conversation through the widget.

### **Support:**

For further assistance or troubleshooting, refer to the Frontman documentation or contact the Frontman support team.