
Security News
Crates.io Implements Trusted Publishing Support
Crates.io adds Trusted Publishing support, enabling secure GitHub Actions-based crate releases without long-lived API tokens.
@typebot.io/nextjs
Advanced tools
npm install @typebot.io/nextjs
import { Standard } from "@typebot.io/nextjs";
const App = () => {
return (
<Standard
typebot="lead-generation-copy-3luzm6b"
style={{ width: "100%", height: "600px" }}
/>
);
};
This code is creating a container with a 100% width (will match parent width) and 600px height.
import { Popup } from "@typebot.io/nextjs";
const App = () => {
return <Popup typebot="lead-generation-copy-3luzm6b" autoShowDelay={3000} />;
};
This code will automatically trigger the popup window after 3 seconds.
You can use these commands:
import { open } from "@typebot.io/nextjs";
open();
import { close } from "@typebot.io/nextjs";
close();
import { toggle } from "@typebot.io/nextjs";
toggle();
import { Bubble } from "@typebot.io/nextjs";
const App = () => {
return (
<Bubble
typebot="lead-generation-copy-3luzm6b"
previewMessage={{
message: "I have a question for you!",
autoShowDelay: 5000,
avatarUrl: "https://avatars.githubusercontent.com/u/16015833?v=4",
}}
theme={{
button: { backgroundColor: "#0042DA", iconColor: "#FFFFFF" },
previewMessage: { backgroundColor: "#ffffff", textColor: "black" },
}}
/>
);
};
This code will show the bubble and let a preview message appear after 5 seconds.
You can use these commands:
import { showPreviewMessage } from "@typebot.io/nextjs";
Typebot.showPreviewMessage();
import { hidePreviewMessage } from "@typebot.io/nextjs";
Typebot.hidePreviewMessage();
You can use these commands:
import { open } from "@typebot.io/nextjs";
open();
import { close } from "@typebot.io/nextjs";
close();
import { toggle } from "@typebot.io/nextjs";
toggle();
You can prefill the bot variable values in your embed code by adding the prefilledVariables
option. Here is an example:
import { Standard } from "@typebot.io/nextjs";
const App = () => {
return (
<Standard
typebot="lead-generation-copy-3luzm6b"
style={{ width: "100%", height: "600px" }}
prefilledVariables={{
"Current URL": "https://my-site/account",
"User name": "John Doe",
}}
/>
);
};
It will prefill the Current URL
variable with "https://my-site/account" and the User name
variable with "John Doe". More info about variables: here.
Note that if your site URL contains query params (i.e. https://typebot.io?User%20name=John%20Doe), the variables will automatically be injected to the typebot. So you don't need to manually transfer query params to the bot embed configuration.
FAQs
Convenient library to display typebots on your Next.js website
The npm package @typebot.io/nextjs receives a total of 673 weekly downloads. As such, @typebot.io/nextjs popularity was classified as not popular.
We found that @typebot.io/nextjs demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Crates.io adds Trusted Publishing support, enabling secure GitHub Actions-based crate releases without long-lived API tokens.
Research
/Security News
Undocumented protestware found in 28 npm packages disrupts UI for Russian-language users visiting Russian and Belarusian domains.
Research
/Security News
North Korean threat actors deploy 67 malicious npm packages using the newly discovered XORIndex malware loader.