Chatbot Widget
Start conversational flows for jobs or arbitrary flows
Register the Chatbot plugin and open flows programmatically.
import { chatbotPlugin } from '@inploi/plugin-chatbot';
import { initialiseSdk } from '@inploi/sdk';
const sdk = initialiseSdk({ publishableKey: 'pk_...', env: 'sandbox' });
const chatbot = sdk.register(chatbotPlugin({ theme: { hue: 260, mode: 'light' } }));
// Optional: prepare UI eagerly
await chatbot.prepare();
// Fetch by ATS job id
const flow = chatbot.fetchFlowByJobId('12345');
chatbot.open(flow);
// Or fetch by flow id
const flow = chatbot.fetchFlowById('flow_...');
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: 'production' });
const chatbot = sdk.register(inploi.chatbotPlugin({ theme: { hue: 260, mode: 'light' } }));
await chatbot.prepare();
const flow = chatbot.fetchFlowByJobId('12345');
chatbot.open(flow);
});
</script>Plugin configuration
When registering the plugin, you can pass the following:
theme
Defines how the chatbot will look like. Internally, a color palette is generated.
Prop
Type
feedback
Optional. If provided, you can collect feedback from the users.
Prop
Type
Example:
import { feedbackPlugin } from '@inploi/plugin-feedback';
const chatbot = sdk.register(
chatbotPlugin({
feedback: {
plugin: feedbackPlugin(),
params: {
terms: {
negative_heading: 'I’m so sad you don’t like it. Why?',
},
},
},
}),
);terms
Optional. If provided, you can override the default translation terms for the chatbot.
Prop
Type
Example:
const chatbot = sdk.register(
chatbotPlugin({
terms: {
undo: 'Desfazer',
send: 'Enviar',
skip: 'Pular',
skipped: 'Pulado',
submission_redirect_message: 'Quase lá! Por favor, complete seu envio aqui:',
complete_submission: 'Completar envio',
submission_completed: 'Envio completo!',
submission_failed: 'Falha ao enviar',
maximize: 'Maximizar',
},
}),
);API surface
Once registered, the returned object is a chatbot instance. You may call any of the following methods:
prepare()
Eagerly render UI assets. This is optional, but recommended to avoid delays when opening the chatbot.
await chatbot.prepare();open(flow)
Opens the chatbot with either a preloaded flow, or a promise that resolves to a flow. If already open, replaces the current flow.
await chatbot.open(flow);Prop
Type
close()
Closes the chatbot. Can be called from anywhere in your code.
await chatbot.close();fetchFlowByJobId(jobId, overrides?)
Fetches a flow by job id, either from inploi or ATS.
const flow = await chatbot.fetchFlowByJobId('12345');
chatbot.open(flow);Optional overrides:
Prop
Type
fetchFlowById(flowId, overrides?)
Fetches a flow by flow id.
const flow = await chatbot.fetchFlowById('flow_12345');
chatbot.open(flow);Optional overrides:
Prop
Type