Check out the web component example for more options.
Embed code
On the dashboard, navigate to the Integrations tab and install the “Embed” integration. This will provide you with an embed code and allow you to connect with a custom agent.
On your web page, create a container with the ID markprompt-container. You can size it to fit your needs:
1<div id="markprompt-container"></div>
Next, add the following <script> tag:
1<script src="https://markprompt.com/embed/YOUR-EMBED-CODE"></script>
Replace YOUR-EMBED-CODE with the embed code you obtained.
Script tag
Paste the following to your HTML page:
1<link
2 href="https://esm.sh/@markprompt/css@0.33.0?css"
3 rel="stylesheet"
4/>
5
6<script type="module">
7 window.markprompt = {
8 projectKey: 'YOUR-PROJECT-KEY',
9 container: '#markprompt',
10 defaultView: 'chat',
11 display: 'sheet',
12 options: {
13 chat: {
14 assistantId: 'YOUR-ASSISTANT-ID',
15 enabled: true,
16 defaultView: {
17 message: "Hello, I'm an AI assistant from Acme!",
18 prompts: [
19 'What is Markprompt?',
20 'How do I setup the React component?',
21 'Do you have a REST API?',
22 ],
23 },
24 },
25 // …
26 },
27 };
28</script>
29
30<script
31 type="module"
32 src="https://esm.sh/@markprompt/web@0.46.0/init"
33></script>
34
35<div id="markprompt"></div>
replacing YOUR-PROJECT-KEY and YOUR-ASSISTANT-ID with the values obtained from your Markprompt project.
Web component (HTML)
Paste the following to your HTML page:
1<link
2 rel="stylesheet"
3 href="https://esm.sh/@markprompt/css@0.33.0?css"
4/>
5<script type="module">
6 import { markprompt } from 'https://esm.sh/@markprompt/web@0.46.0';
7
8 const markpromptEl = document.querySelector('#markprompt');
9 markprompt('YOUR-PROJECT-KEY', markpromptEl, {
10 defaultView: 'chat',
11 display: 'sheet',
12 chat: {
13 assistantId: 'YOUR-ASSISTANT-ID',
14 enabled: true,
15 defaultView: {
16 message: "Hello, I'm an AI assistant from Acme!",
17 prompts: [
18 'What is Markprompt?',
19 'How do I setup the React component?',
20 'Do you have a REST API?',
21 ],
22 },
23 },
24 // …
25 });
26</script>
replacing YOUR-PROJECT-KEY and YOUR-ASSISTANT-ID with the values obtained from your Markprompt project.
Web component (Node)
Install the @markprompt/web and @markprompt/css packages:
1npm install @markprompt/web @markprompt/css
In your page, add an element with id markprompt:
1<div id="markprompt"></div>
Import and call the markprompt function with your project key, target element, and optional parameters.
1import '@markprompt/css';
2import { markprompt } from '@markprompt/web';
3
4const markpromptEl = document.querySelector('#markprompt');
5markprompt('YOUR-PROJECT-KEY', markpromptEl, {
6 defaultView: 'chat',
7 display: 'sheet',
8 chat: {
9 assistantId: 'YOUR-ASSISTANT-ID',
10 enabled: true,
11 defaultView: {
12 message: "Hello, I'm an AI assistant from Acme!",
13 prompts: [
14 'What is Markprompt?',
15 'How do I setup the React component?',
16 'Do you have a REST API?',
17 ],
18 },
19 },
20 // …
21});
replacing YOUR-PROJECT-KEY and YOUR-ASSISTANT-ID with the values obtained from your Markprompt project.
React
Install the @markprompt/react and @markprompt/css packages:
1npm install @markprompt/react @markprompt/css
In your React application, paste the following:
1import '@markprompt/css';
2import { Markprompt } from '@markprompt/react';
3
4export function Component() {
5 return (
6 <Markprompt
7 projectKey="YOUR-PROJECT-KEY"
8 defaultView="chat"
9 display="sheet"
10 chat={{
11 assistantId: 'YOUR-ASSISTANT-ID',
12 enabled: true,
13 defaultView: {
14 message: "Hello, I'm an AI assistant from Acme!",
15 prompts: [
16 'What is Markprompt?',
17 'How do I setup the React component?',
18 'Do you have a REST API?',
19 ],
20 },
21 // …
22 }}
23 />
24 );
25}
replacing YOUR-PROJECT-KEY and YOUR-ASSISTANT-ID with the values obtained from your Markprompt project.
For further customization, including CSS styling and the use of headless components and hooks, read the Markprompt SDK .
Docusaurus
For Docusaurus -powered sites, you can use the @markprompt/docusaurus-theme-search plugin.
Install the @markprompt/docusaurus-theme-search package:
1npm install @markprompt/docusaurus-theme-search
Add the following to your docusaurus.config.js file:
1const config = {
2 // …
3 themes: ['@markprompt/docusaurus-theme-search'],
4 themeConfig: {
5 markprompt: {
6 projectKey: 'YOUR-PROJECT-KEY',
7 defaultView: 'chat',
8 display: 'sheet',
9 chat: {
10 assistantId: 'YOUR-ASSISTANT-ID',
11 enabled: true,
12 defaultView: {
13 message: "Hello, I'm an AI assistant from Acme!",
14 prompts: [
15 'What is Markprompt?',
16 'How do I setup the React component?',
17 'Do you have a REST API?',
18 ],
19 },
20 // …
21 },
22 },
23 },
24};
replacing YOUR-PROJECT-KEY and YOUR-ASSISTANT-ID with the values obtained from your Markprompt project.
For a full example, check out the Docusaurus plugin template .
Open/close the Markprompt component dynamically
You can open and close the Markprompt component programmatically by calling the open and close methods:
Using the script tag
1window.markprompt.open();
2window.markprompt.close();
Using the web component
1import {
2 openMarkprompt,
3 closeMarkprompt,
4} from 'https://esm.sh/@markprompt/web@0.46.0';
5
6openMarkprompt();
7closeMarkprompt();