Quickstart Guide

Once you have created and trained your agent in the dashboard, it is incredibly easy to add it to your website.

Copy and paste the following <script> tag into the <head> or <body> of your website’s HTML:

<script
  src="https://widget.picobot.dev/widget.js"
  data-agent-id="YOUR_AGENT_ID"
  defer>
</script>

Replace YOUR_AGENT_ID with the unique ID found in your agent’s dashboard settings.

React Integration

If you are using React or Next.js, you can embed the script using a useEffect hook:

import { useEffect } from 'react';

export default function MyComponent() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = "https://widget.picobot.dev/widget.js";
    script.dataset.agentId = "YOUR_AGENT_ID";
    script.defer = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <div>My Website</div>;
}

Quickstart Guide

Adding the Widget

React Integration