To properly customize the Header and Footer, you start by going into the “Settings” tab of Botmock in the top right of the editor. Within Settings, you will see the option to add a Custom Header and Footer under the options to change the bot’s name, the error message, and the avatar.

With these options:

  • A Custom Header needs to be 375px x 80px
  • A Custom Footer needs to be 375px x 44px

After saving these options, you’re ready to see the custom header and footer in the different preview/testing methods within Botmock.

Previewing the Header/Footer

In Botmock, there are a couple ways to preview your custom header and footer. The first way is by simply going to the internal “Preview” tab, where you should see only the header, while the footer is covered due to our input section. This works the same way in Usability Testing, where your testers will be able to see a custom header, but won’t be able to see a custom footer, since there is an input covering it.

The way to preview both is by creating a Journey and hitting a preview, or exporting the whole Journey as a video. In this case, you will see the custom Header and Footer, since there isn’t a way to input anything into a conversation in Journeys.

Next Steps

And that’s it for customizing the Header and the Footer of your Botmock Conversational Prototypes. The next step is to get moving with creating the actual headers and footers for your projects and testing them to get as close to the design of your conversational product as possible.

In the future, we are working on more ways to customize the “Preview” of your conversational interfaces with text, chat bubbles, and more. We will also be releasing a way to create interfaces that closer resemble Desktop-based conversational products rather than just app-focused previews.

Keep an eye out on your email for all the latest Feature updates within Botmock! If you have any questions, feel free to us through our Live Chat or through

Did this answer your question?