Skip to main content

Layout Editor

ec-demo-image

image

We offer a layout editor that lets you customize the design and appearance of the EmbeddedChat component in real time. Features include:

  • ChatHeader Options: Add, remove, or reorder various options.
  • MessageToolbox Options: Tailor toolbox settings.
  • ChatInputFormatting Toolbar Options: Adjust input toolbar settings.
  • Drag-and-Drop: Easily switch and reorder menu and surface items.
  • Resizable Sidebar: Adjust the sidebar by dragging.
  • Theme Lab: Customize layout and theme settings, including palette colors and typography.

Try It Out 🚀​

Explore the Layout Editor to style and customize EmbeddedChat to your needs. Generate a theme object and pass it to EmbeddedChat via props. Start customizing here: Layout Editor

Theme Lab​

In the Theme Lab, you can:

  • Customize Palette Colors: Adjust colors for both light and dark modes.
  • Font Settings: Modify font-related settings.
  • Layout Customization: Change layout variants and display names, and restore deleted options.

Once satisfied with your changes, click the "Generate Theme" button to create a theme object.

image

Integration​

To apply your custom theme:

<EmbeddedChat
  // ...other props
  theme={myCustomTheme}
/>

Alternatively, you can paste the theme object into the Theme settings of the EmbeddedChat RC App. Note: These settings will only take effect if the remoteOpt prop is set to true when configuring EmbeddedChat.

Development​

Clone the repo, navigate to packages/layout_editor, then run:

yarn dev   # Start server
yarn build # Build for production
yarn preview # Preview build

Additional Resources​

  • For installation instructions of the EmbeddedChat RC App, visit this guide.
  • For detailed prop usage, refer to this guide.