title: Quick Start description: Add the Navigic chat widget to your website in under 5 minutes. order: 1
Quick Start
Add the Navigic chat widget to your website in under 5 minutes.
Prerequisites
- A Navigic account
- A website you can edit the HTML of
1. Create an Embed Key
Go to Settings > Embed in your dashboard. Click Create Embed Key and give it a label (e.g., "Production site").
2. Configure Allowed Origins
Add your website's origin to the key's allowed origins list. For example:
https://yoursite.comThis tells Navigic which domains are authorized to use your key. You can add http://localhost:3000 for local development.
3. Deploy an Agent
Your widget needs an agent to respond to messages. Go to Studio in the dashboard and deploy one. The widget will load but won't respond until an agent is live.
4. Copy the Snippet
The dashboard generates a ready-to-paste snippet. It looks like this:
<script
src="https://releases.navigic.ai/embed/embed.js?v=7"
data-api-key="pk_wk_YOUR_KEY_HERE"
async
></script>Paste it before the closing </body> tag on your website.
5. Verify
Go back to Settings > Embed. The Installation Status card will show your origin as Active once the widget connects. This usually takes a few seconds after loading your site.
If it doesn't connect, check the Troubleshooting guide.
What's Next
- Display Modes — Choose between bubble, panel, or inline
- Identity Verification — Link conversations to your users
- JavaScript API — Control the widget programmatically
- Script Tag Reference — All configuration attributes