@memori.ai/memori-webcomponent v7.8.4
Memori WebComponent
WebComponent to integrate a Memori in a web page or web app.
Platforms:
- MemoryTwin: consumer / creator platform
- TwinCreator: developer-oriented platform
Uses memori-react under the hood. See demo.
Installation from npm
npm i --save @memori.ai/memori-webcomponent
Embed or usage from CDN (suggested)
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@memori.ai/memori-webcomponent/dist/memori-webcomponent.js"
></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@memori.ai/memori-react/dist/styles.min.css"
/>
Usage
<memori-client
memoriName="Memori"
ownerUserName="memoridev"
tenantID="www.aisuru.com"
apiURL="https://backend.memori.ai"
engineURL="https://engine.memori.ai"
baseURL="https://www.aisuru.com"
uiLang="it"
multilingual="true"
showShare="true"
></memori-client>
For more details on attributes, see memori-react component props.
Special note for height
: defaults to 100%
and can be set to a fixed value (e.g. 500px
).
For the best experience, it is recommended to set it to '100vh' (full height of the viewport) or '100svh'.
Initial context
As for memori-react component, it is possible to pass an initial context to the Memori session.
With this WebComponent that is slightly different, as the context is not passed as a JSON but as a string in the context
attribute as comma-separated KEY:VALUE
pairs:
<memori-client ... context="VAR1:VALUE1,VAR2:VALUE2"></memori-client>
Styling
You can override the default styles of the Memori by customizing the following CSS custom properties:
memori-client,
#headlessui-portal-root,
.memori-widget {
--memori-primary: rgb(102, 103, 171);
--memori-primary-text: #fff;
--memori-inner-content-pad: 1rem;
--memori-inner-bg: transparent;
--memori-chat-bubble-bg: #ffffff60;
--memori-text-color: #000;
--memori-button-bg: #fff;
--memori-button-text: #000;
--memori-button-padding: 0.5rem 1.5rem;
--memori-button-border-color: #d9d9d9;
--memori-button-radius: 5px;
--memori-button-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
--memori-blur-background: 0px;
--memori-drawer--width: 100%;
--memori-drawer--width--md: 80%;
--memori-drawer--width--lg: 60%;
--memori-modal--width: 100%;
--memori-modal--width--md: 80%;
--memori-error-color: #ff4d4f;
}
You can review the default styles in the styles.css file.
See also
- memori-api-client - API client for Memori
- memori-react - React library for Memori, used by this library
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
12 months ago
1 year ago
12 months ago
1 year ago
12 months ago
1 year ago
12 months ago
1 year ago
11 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago