Script tag
Paste the following to your HTML page:
1<link
2 href="https://esm.sh/@markprompt/css@0.29.0?css"
3 rel="stylesheet"
4/>
5<script type="module">
6 window.markprompt = {
7 projectKey: 'YOUR-PROJECT-KEY',
8 container: '#markprompt',
9 options: {
10 /* Options */
11 },
12 };
13</script>
14<script
15 type="module"
16 src="https://esm.sh/@markprompt/web@0.33.0/init"
17></script>
18<div id="markprompt" />
replacing YOUR-PROJECT-KEY with the key obtained in your project settings.
Web component (HTML)
Paste the following to your HTML page:
1<link
2 rel="stylesheet"
3 href="https://esm.sh/@markprompt/css@0.29.0?css"
4/>
5<script type="module">
6 import { markprompt } from 'https://esm.sh/@markprompt/web@0.33.0';
7
8 const markpromptEl = document.querySelector('#markprompt');
9 markprompt('YOUR-PROJECT-KEY', markpromptEl, {
10 /* Options */
11 });
12</script>
replacing YOUR-PROJECT-KEY with the key obtained in your project settings.
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:
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 /* Options */
7});
replacing YOUR-PROJECT-KEY with the key obtained in your project settings.
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 <Markprompt projectKey="YOUR-PROJECT-KEY" />;
6}
replacing YOUR-PROJECT-KEY with the key obtained in your project settings.
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 },
8 },
9};
replacing YOUR-PROJECT-KEY with the key obtained in your project settings.
For a full example, check out the Docusaurus plugin template.