Try it on your site
Enter your Interactor ID
Add once to your HTML or app shell.
Embed code · HTML
<link rel="stylesheet"
href="https://embed.interactor.ai/assets/index.css" />
<script type="module">
import "https://embed.interactor.ai/assets/index.js";
window.interactor.initialize("interactor", {
type: 'sidebar',
isOpen: false,
isFabVisible: true
});
</script>Make it your own
Use your buttons and forms to send messages and trigger workflows in Interactor.
Open from any button
Make an existing button or link open the chat.
Custom button
<button type="button" id="ask-us">Ask us</button>
<script type="module">
document.querySelector('#ask-us')
.addEventListener('click', () => {
window.interactor.modal.open();
});
</script>Send a message
Send a message to ask a question or trigger a workflow.
Send a message
await window.interactor.message.send(
"I’d like to book a consultation"
);Hand off a form
Turn a form submission into a conversation.
Form handoff
document.querySelector('#lead-form')
.addEventListener('submit', async (event) => {
event.preventDefault();
const data = new FormData(event.currentTarget);
try {
await window.interactor.message.send([
'Website inquiry',
'Name: ' + data.get('name'),
'Message: ' + data.get('message'),
].join('\n'));
} catch {
alert('Could not send. Please try again.');
}
});Match your field names. Keep any existing save or email step you need.
Chat controls
JavaScript
window.interactor.modal.close();
window.interactor.modal.toggle();
window.interactor.button.show();
window.interactor.button.hide();
// To use only your own buttons, initialize with:
// isFabVisible: falseUTM tracking
Pass campaign details from your website URL into Interactor, so conversations carry the source, medium, campaign, and content that brought visitors to your site.
Turn on “Include UTM tracking” above to add this to your embed code. Pages without UTM tags work as usual.
Need help?
Ask us about adding Interactor to your site.