Getting started
Documentation
Marketplace
Playground
Feedback
Contact
Sign In
Sign In
Feedback
Contact
Sign In
Feedback
SDKs
Get Started
bun
bun
DigiBot Playground ⚙️
DigiBot Playground ⚙️
Key Notes
Copy Your DigiBot's API Key
After creating a DigiBot in your account, navigate to the DigiBot Dashboard.
Copy the API Key of the DigiBot you want to test.
Navigate to the Playground
Go to the DigiBot Playground to test and interact with your chatbot.
Explore the React Compiler
The Playground is divided into two sections:
Left Panel: React code editor (compiler).
Right Panel: Preview area to see the chatbot widget in action.
Replace Component Details
In the React Compiler (left panel), you’ll find a pre-written component:
Copy Your DigiBot's API Key
After creating a DigiBot in your account, navigate to the DigiBot Dashboard.
Copy the API Key of the DigiBot you want to test.
Navigate to the Playground
Go to the DigiBot Playground to test and interact with your chatbot.
Explore the React Compiler
The Playground is divided into two sections:
Left Panel: React code editor (compiler).
Right Panel: Preview area to see the chatbot widget in action.
Replace Component Details
In the React Compiler (left panel), you’ll find a pre-written component:
Copy Your DigiBot's API Key
After creating a DigiBot in your account, navigate to the DigiBot Dashboard.
Copy the API Key of the DevBot you want to test.
Navigate to the Playground
Go to the DigiBot Playground to test and interact with your chatbot.
Explore the React Compiler
The Playground is divided into two sections:
Left Panel: React code editor (compiler).
Right Panel: Preview area to see the chatbot widget in action.
Replace Component Details
In the React Compiler (left panel), you’ll find a pre-written component:
Interactive React Code Editor: Easily customize the chatbot widget code.
Live Preview: Instant visualization of the chatbot widget in the preview area.
Seamless Integration: Copy your API key and test your chatbot with minimal setup.
Interactive React Code Editor: Easily customize the chatbot widget code.
Live Preview: Instant visualization of the chatbot widget in the preview area.
Seamless Integration: Copy your API key and test your chatbot with minimal setup.
Replace:
your_digiBot_apikeywith the API key you copied. (line 5)your_digiBot_titlewith a custom title for your chatbot. (line 6)
Preview Your Chatbot Widget
After replacing the details, the Right Panel will automatically render the chatbot widget.
You can interact with the chatbot in real-time, just as it would appear on a live website.
Replace:
your_digiBot_apikeywith the API key you copied. (line 5)your_digiBot_titlewith a custom title for your chatbot. (line 6)
Preview Your Chatbot Widget
After replacing the details, the Right Panel will automatically render the chatbot widget.
You can interact with the chatbot in real-time, just as it would appear on a live website.
Interactive React Code Editor: Easily customize the chatbot widget code.
Live Preview: Instant visualization of the chatbot widget in the preview area.
Seamless Integration: Copy your API key and test your chatbot with minimal setup.
Replace:
your_digiBot_apikeywith the API key you copied. (line 5)your_digiBot_titlewith a custom title for your chatbot. (line 6)
Preview Your Chatbot Widget
After replacing the details, the Right Panel will automatically render the chatbot widget.
You can interact with the chatbot in real-time, just as it would appear on a live website.
Key Notes
pnpm (Performant Node Package Manager)
bun