Mendable Vanilla JS

Before install, make sure you have either signed up through our platform or we have provided you with the ANON_KEY. Without the key, you won't be able to setup the search component.

Mendable Vanilla JS

To use Mendable with Vanilla JS, you need to include a script tag in your HTML file.

Floating Button

For the floating button it is pretty straightfoward. Just add these 2 scripts tags to the your HTML.

For customization refer to the props section of the floating button component.

<script  src="https://unpkg.com/@mendable/search@0.0.203/dist/umd/mendable-bundle.min.js"></script>
<script>
  Mendable.initialize({
    anon_key: 'YOUR_ANON_KEY',
    type: 'floatingButton',
    // all the other props for the component type
  })
</script>

Non-blocking script

If you want to load the script without blocking the page loading, you can add the defer attribute to both script tags and add a DOMContentLoaded event listener to the other script tag.

<script defer src=https://unpkg.com/@mendable/search@0.0.203/dist/umd/mendable-bundle.min.js></script>
<script defer>
document.addEventListener('DOMContentLoaded', function() {

  const style = { darkMode: false, accentColor: "#000000" }

  Mendable.initialize({
    anon_key: 'YOUR_ANON_KEY',
    type: "chat",
    hintText: "",
    style:style,
  });
});
</script>

Note: The botIcon, userIcon and icon props should be passed as a public image URL string and not as an HTML tag.

Search Bar

For the search bar, you need to add a div with an id to your HTML file. Then add these 2 scripts tags to the your HTML.

The div represents where your component will be rendered in the page. You can change the id to whatever you want, but make sure to change the elementId prop to match the id of the div.

For customization refer to the props section of the search bar component.

<div id="mendable-component"></div>

<script src="https://unpkg.com/@mendable/search@0.0.203/dist/umd/mendable-bundle.min.js"></script>
<script>
  Mendable.initialize({
    anon_key: 'YOUR_ANON_KEY',
    type: 'searchBar',
    elementId: 'mendable-component', // required
    // all the other props for the component type
  })
</script>

MendableInPlace

This component is the Mendable Chat only, does not include an activation component or dialog transitions, making it easy for you to create your own activations on top of it.

For customization refer to the props section of the search bar component.

<div id="mendable-component"></div>

<script src="https://unpkg.com/@mendable/search@0.0.203/dist/umd/mendable-bundle.min.js"></script>
<script>
  Mendable.initialize({
    anon_key: 'YOUR_ANON_KEY',
    type: 'inPlace',
  })
</script>

Chat Bubble

The Chat Bubble is a component that appears as a floating chat icon, typically pinned to the bottom right of the screen. When clicked, it will open a dialog with Mendable Chat.

<div id="mendable-component"></div>

<script src="https://unpkg.com/@mendable/search@0.0.203/dist/umd/mendable-bundle.min.js"></script>
<script>
  Mendable.initialize({
    anon_key: 'YOUR_ANON_KEY',
    type: 'chat',
  })
</script>