Conversational application flows
npm install @inploi/plugin-chatbot
pnpm add @inploi/plugin-chatbot
<script defer src="https://unpkg.com/@inploi/plugin-chatbot/cdn/index.js"></script>
import { initialiseSdk } from '@inploi/sdk';
import { chatbotPlugin } from '@inploi/plugin-chatbot';
const sdk = initialiseSdk({ publishableKey: 'pk_...', env: 'sandbox' });
const chatbot = sdk.register(chatbotPlugin({
theme: { hue: 260, mode: 'light' },
}));
// Prepare UI eagerly (optional but recommended)
await chatbot.prepare();
// Fetch and open a flow by job ID
const flow = chatbot.fetchFlowByJobId('12345');
chatbot.open(flow);
<script defer src="https://unpkg.com/@inploi/sdk/cdn/index.js"></script>
<script defer src="https://unpkg.com/@inploi/plugin-chatbot/cdn/index.js"></script>
<script>
document.addEventListener('DOMContentLoaded', async () => {
const sdk = inploi.initialiseSdk({ publishableKey: 'pk_...', env: 'sandbox' });
const chatbot = sdk.register(inploi.chatbotPlugin({
theme: { hue: 260, mode: 'light' },
}));
await chatbot.prepare();
// Open chatbot when user clicks apply
document.querySelector('#apply-btn').addEventListener('click', () => {
const flow = chatbot.fetchFlowByJobId('12345');
chatbot.open(flow);
});
});
</script>
type ChatbotTheme = {
hue: number; // 0-360 color hue
mode: 'light' | 'dark';
};
import { feedbackPlugin } from '@inploi/plugin-feedback';
const chatbot = sdk.register(chatbotPlugin({
feedback: {
plugin: feedbackPlugin(),
params: {
terms: {
negative_heading: "We're sorry to hear that. What went wrong?",
},
},
},
}));
const chatbot = sdk.register(chatbotPlugin({
terms: {
send: 'Submit',
skip: 'Skip this',
undo: 'Go back',
},
}));
prepare()await chatbot.prepare();
open(flow)chatbot.open(flow);
close()chatbot.close();
fetchFlowByJobId(jobId)const flow = chatbot.fetchFlowByJobId('12345');
fetchFlowById(flowId)const flow = chatbot.fetchFlowById('flow_abc123');