> ## Documentation Index
> Fetch the complete documentation index at: https://guides.robylon.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Robylon × Wordpress Integration: Add Chat to your site

> Install the Robylon chat widget on Wordpress. Add chat widgets, secure webhooks, and event tracking-without code.

### **Step 1: Generate and Copy Your Robylon Chatbot Embed Code.**

1. Log in to your Robylon account and open the dashboard.
2. In the left panel, click on the settings button to navigate to the settings page.

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/Robylon1.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=c7b4c4c51ba8839c514508c2199c7ac6" alt="The Robylon dashboard Settings page, where you start WordPress chatbot embed setup" width="1909" height="830" data-path="Robylon1.png" />
   </Frame>
3. Within the settings tab, select [<u>Channels</u>](https://app.robylon.ai/settings/channels).

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/Robylon2.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=3c68c15e0c43443b2b6cb649409e9644" alt="Robylon Channels menu in settings to select Chatbot for WordPress integration" width="1887" height="832" data-path="Robylon2.png" />
   </Frame>
4. Click on the [<u>Chatbot</u>](https://app.robylon.ai/settings/channels/chatbot/interface) widget to access the chatbot details.

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/Robylon3.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=3adcd9410a7c08fb6e7a558c1855631e" alt="Chatbot widget tile selected in Robylon Channels to view its settings" width="1894" height="825" data-path="Robylon3.png" />
   </Frame>
5. Navigate to the [<u>Install</u>](https://app.robylon.ai/settings/channels/chatbot/install) tab within the chatbot details page.

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/Robylon4.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=9f163359a767d412287a835ad527f107" alt="Robylon Chatbot “Install” tab showing embedding options for WordPress" width="1898" height="823" data-path="Robylon4.png" />
   </Frame>
6. Select JavaScript to embed code in WordPress.

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/Robylon5JS.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=66abec3b90dffa30028202101fbba7f2" alt="JavaScript embed option selected in Robylon for WordPress chatbot code" width="1870" height="820" data-path="Robylon5JS.png" />
   </Frame>
7. Copy the provided chatbot embed code.

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/Robylon6JS.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=65edf9b8a91ff77472ba55f198cc122d" alt="Embed code snippet in Robylon ready to copy for WordPress site" width="1861" height="841" data-path="Robylon6JS.png" />
   </Frame>

### **Step 2**: Install the WPCode plugin on your WordPress Website to embed Robylon’s bot code

1. Login to your WordPress dashboard, and go to the plugin button in the admin bar on the left side, and then click on the ‘Add New Plugin’.

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/images/WP1.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=edbc25ccf2febf89342c01b3c9310a49" alt="WordPress dashboard showing Plugins → Add New screen to install WPCode" width="1899" height="848" data-path="images/WP1.png" />
   </Frame>
2. Then search for the ‘WPCode’ plugin and install it to embed custom code.

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/images/WP2.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=0e41b2cb2bf083b2c7ca1b518825800c" alt="WPCode plugin listing in the WordPress Add Plugins page is ready for installation" width="1892" height="829" data-path="images/WP2.png" />
   </Frame>
3. Click on the ‘Activate’ button in the plugin. Upon activation, the plugin will be added to the ‘Installed Plugins’ page.

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/images/WP3.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=835a66f4b32226ae7b47f509a172b31d" alt="Activate the WPCode plugin in the WordPress Installed Plugins list" width="1475" height="840" data-path="images/WP3.png" />
   </Frame>
4. Click on the ‘Installed Plugins’ button in the WordPress admin bar to go to the plugin page.

### **Step 3**: Embed the code in WordPress to Display Your Chatbot Widget 

1. Click on the ‘Code Snippets’ labeled menu item in your WordPress admin bar, and it will open the ‘All Snippets’ page.

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/images/WP4.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=4cdc30578f1b0ebb371fffaa2232b064" alt="The WordPress sidebar “Code Snippets” menu is visible to embed Robylon code" width="1883" height="826" data-path="images/WP4.png" />
   </Frame>
2. Then, click on the ‘Add New’ button, and this will bring you to the add snippet page.

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/images/WP5.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=e924225a91954eb09b3b2ba4c05abfd5" alt="Add a New Snippet page in WordPress showing options to create a custom snippet" width="1884" height="832" data-path="images/WP5.png" />
   </Frame>
3. Click on the ‘+Add Custom Snippet’ button.

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/images/WP6.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=71a0a9ec2fc3a97fd170a0fab5f4d1c1" alt="WordPress WPCode plugin screen with the option to add a custom code snippet for embedding the Robylon agent" width="1881" height="799" data-path="images/WP6.png" />
   </Frame>
4. Then, choose the code type from the list of options that appear on the screen, and click on JavaScript in our case.

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/images/WP7.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=f422ce4a9251ae85f06c5473767e1dea" alt="WordPress snippet creation with a prompt to choose the JavaScript snippet type" width="1876" height="851" data-path="images/WP7.png" />
   </Frame>
5. Now, enter a title for the custom code snippet and paste the copied code for the chatbot, and save the snippet.

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/images/WP8.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=fc507ad63ef613b8e58d5f92f27fbbd2" alt="WordPress snippet editor where you paste the Robylon chatbot code" width="1879" height="796" data-path="images/WP8.png" />
   </Frame>
6. Then you will see 2 options to insert, you can select the ‘Auto Insert’ method, and the snippet will be automatically inserted and executed on your site.

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/images/WP9.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=f355e7f357d0ca339789881a06638df0" alt="WordPress snippet settings showing “Auto Insert” method selected" width="1884" height="822" data-path="images/WP9.png" />
   </Frame>
7. Now you can preview your site to see the embedded Robylon’s chatbot there.

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/images/WP10.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=a40903677c626f7d43be2d133edef005" alt="WordPress website with Robylon chatbot launcher icon visible in bottom right corner after integration." width="1885" height="816" data-path="images/WP10.png" />
   </Frame>

   <Frame>
     <img src="https://mintcdn.com/robylonai/pG36l_PUrEUv4ovY/images/WP11.png?fit=max&auto=format&n=pG36l_PUrEUv4ovY&q=85&s=4179b8aeeb4558638e6873eb418613e0" alt="WordPress site with Robylon Support Bot open, showing chatbot greeting message after successful integration" width="1882" height="814" data-path="images/WP11.png" />
   </Frame>
