Its also quite easy to create a custom them for your BotUI.
Clone the git repo.
cd
to cloned folder.
Do an npm install
Run gulp watch
Go to src/styles/themes
folder
Make a copy of default.scss
file and name it something like custom.scss
Now you can change the styles in custom.scss
and save the file.
Go to build
folder and you'll see a botui-theme-custom.css
file there.
Copy it into your project and link it instead of botui-theme-default.css
.
Thats it!.
This is what the HTML of BotUI looks like when initiated:
<div class="botui botui-container">
<div class="botui-messages-container">
<div class="botui-message"> <!-- This element will also have any classes applied via 'cssClass' to 'message' -->
<div :class="[{human: msg.human, 'botui-message-content': true}, msg.type]"> <!-- -->
<span></span> <!-- If type is text, this will hold that text -->
<iframe></iframe> <!-- If type is embed -->
</div>
</div>
</div>
<div class="botui-actions-container">
<div>
<form class="botui-actions-text" :class="action.cssClass"> <!-- -->
<input class="botui-actions-text-input" :class="action.text.cssClass" required/> <!-- -->
<button class="botui-actions-text-submit">Go</button> <!-- only present on mobile devices -->
</form>
<div class="botui-actions-buttons" :class="action.cssClass"> <!-- -->
<button :class="button.cssClass" class="botui-actions-buttons-button"> <!-- -->
<i class="botui-icon botui-action-button-icon fa" :class="'fa-' + button.icon"></i> <!-- -->
<!-- button text -->
</button>
</div>
</div>
</div>
</div>
You can follow this structure to customize BotUI as you want in your own theme.
.botui-container {
}
.botui-messages-container {
}
.botui-actions-container {
}
.botui-message {
}
.botui-message-content {
&.human {
}
&.text {
}
&.embed {
}
}
.botui-message-content-link {
}
.botui-actions-text-input {
}
.botui-actions-text-submit {
}
.botui-actions-buttons-button {
}