Examples

Vanilla js

<form id="form">
<textarea id="input"></textarea>
<button type="submit">Submit</button>
</form>
import { DeepdeskSDK } from '@deepdesk/deepdesk-sdk';
const formElement = document.getElementById('form');
const inputElement = document.getElementById('input');
const deepdeskSDK = new DeepdeskSDK({
deepdeskUrl: 'https://<accountname>.deepdesk.com/api',
});
deepdeskSDK.getConversationBySessionId('123', {
attempts: 5,
retryDelay: 500,
});
deepdeskSDK.setVisitorInfo({
visitorName: 'Anne',
});
deepdeskSDK.setAgentInfo({
agentName: 'Sam de Pam',
agentNickname: 'Sam',
});
deepdeskSDK.mount(inputElement);
deepdeskSDK.on('select-text-suggestion', suggestion => {
element.value = suggestion.text;
});
deepdeskSDK.on('reset', suggestion => {
element.value = suggestion.text;
});
formElement.addEventListener('submit', async event => {
event.preventDefault();
await sendMessageToYourBackend(); // Handle submit ...
deepdeskSDK.notifySubmit();
element.value = '';
// Refresh suggestions
deepdeskSDK.refresh();
});

React Textarea

import { DeepdeskSDK } from '@deepdesk/deepdesk-sdk';
const ControlledTextarea = () => {
const ref = useRef(null);
const [value, setValue] = useState('');
useEffect(() => {
const deepdeskSDK = new DeepdeskSDK({
deepdeskUrl: 'https://<accountname>.deepdesk.com/api',
});
const listeners = [];
const cleanup = () => {
// Stop listening to the SDK events
listeners.forEach(off => off());
// Unmount suggestions overlay, tabcompletion and remove input listeners
deepdeskSDK.unmount();
};
deepdeskSDK.mount(ref.current);
deepdeskSDK.getConversationBySessionId('123', {
attempts: 5,
retryDelay: 500,
}).catch(() => {
console.log('Could not find conversation');
cleanup();
});
deepdeskSDK.setVisitorInfo({
visitorName: 'Anne',
});
deepdeskSDK.setAgentInfo({
agentName: 'Sam de Pam',
agentNickname: 'Sam',
});
listeners.push(
deepdeskSDK.on('select-text-suggestion', suggestion => {
setValue(suggestion.text);
}),
deepdeskSDK.on('reset', suggestion => {
setValue(suggestion.text);
}),
);
return () => cleanup();
}, []);
const handleSubmit = async event => {
event.preventDefault();
await sendMessageToYourBackend(); // Handle submit ...
// Notify SDK of message submit
if (deepdeskSDK.hasConversation()) {
deepdeskSDK.notifySubmit();
}
// Clear input
setValue('');
// Refresh suggestions
if (deepdeskSDK.hasConversation()) {
deepdeskSDK.refresh();
}
};
return (
<form onSubmit={handleSubmit}>
<textarea
ref={ref}
value={value}
onChange={e => setValue(e.target.value)}
/>
<button type="submit">Submit</button>
</form>
);
};

React DraftJs

import { DeepdeskSDK } from '@deepdesk/deepdesk-sdk';
import { ContentState, Editor, EditorState } from 'draft-js';
const DraftJSInput = () => {
const ref = useRef(null);
const [editorState, setEditorState] = useState(() =>
EditorState.createWithContent(ContentState.createFromText('')),
);
useEffect(() => {
const deepdeskSDK = new DeepdeskSDK({
deepdeskUrl: 'https://<accountname>.deepdesk.com/api',
});
const listeners = [];
const cleanup = () => {
// Stop listening to the SDK events
listeners.forEach(off => off());
// Unmount suggestions overlay, tabcompletion and remove input listeners
deepdeskSDK.unmount();
};
deepdeskSDK.getConversationBySessionId('123', {
attempts: 5,
retryDelay: 500,
}).catch(() => {
console.log('Could not find conversation');
cleanup();
});
deepdeskSDK.setVisitorInfo({
visitorName: 'Anne',
});
deepdeskSDK.setAgentInfo({
agentName: 'Sam de Pam',
agentNickname: 'Sam',
});
deepdeskSDK.mount(ref.current);
listeners.push(
deepdeskSDK.on('select-text-suggestion', suggestion => {
const content = ContentState.createFromText(suggestion.text);
setEditorState(EditorState.createWithContent(content));
}),
deepdeskSDK.on('reset', suggestion => {
const content = ContentState.createFromText(suggestion.text);
setEditorState(EditorState.createWithContent(content));
}),
);
return () => cleanup();
}, []);
const handleSubmit = async event => {
event.preventDefault();
await sendMessageToYourBackend(); // Handle submit ...
// Notify SDK of message submit
if (deepdeskSDK.hasConversation()) {
deepdeskSDK.notifySubmit();
}
// Clear input
setEditorState(EditorState.createWithContent(ContentState.createFromText('')));
// Refresh suggestions
if (deepdeskSDK.hasConversation()) {
deepdeskSDK.refresh();
}
};
return (
<form onSubmit={handleSubmit}>
<div ref={ref}>
<Editor
editorState={editorState}
onChange={setEditorState}
/>
</div>
<button type="submit">Submit</button>
</form>
);
};