Embedding an Elafent Workspace - v9.0+

For version 9.0 and above, Elafent provides a Web Component allowing a Workspace to be embedded in a web page. The documentation below provides an outline of the process and example code snippets you can use as a guide for adding an Elafent Workspace to your site.

1. Importing the Web Component Resources

The JavaScript and CSS resources used by the Web Component need to be included in the page. You can include these in the page <head> tag, or wherever your CMS allows you to add JavaScript and CSS libraries.

Required Tags

<script id="elafent-script" type="text/javascript" charset="utf-8" src="https://app.elafent.com/index.js?version=v9" async></script>
<link rel="stylesheet" href="https://app.elafent.com/elafent-global.css?version=v9" crossorigin="anonymous">
<link rel="stylesheet" href="https://app.elafent.com/elafent-common.css?version=v9" crossorigin="anonymous">

2. Adding basic layout styles

At a minimum, the Elafent Web Component will need a height value before it is visible on the page. The component will default to being 100% of it's container's width, so set a different width value if that isn't the desired behaviour. We reccomend using a vh value for the height, so that the workspace scales appropriately for the end user's screen.

Add the CSS for the elafent-app element wherever your CMS allows you to add custom styles for a page. 

elafent-app {
  height: 80vh;    
}

3. Using the Elafent Web Component

At the location in your page where you would like the Elafent Workspace to be displayed, add the elafent-app Web Component tag:

<elafent-app token="your-workspace-token-here" primary-color="#003e5a" theme-variant="light"></elafent-app>

This component has the following attributes:

  • token (required): This is a unique key that identifies your workspace. Elafent will provide this to you
  • primary-color (recommended): This is a "key" colour that is used to generate the theme applied to the workspace. Hex or RGB values are supported.
  • theme-variant (optional): Supported values are light and dark. If left blank, the theme will be dynamically applied based on the user's OS settings. Ommitting this attribute might make sense if your site supports dynamic theming.