Customization

WonderForm Look and Feel

Published @ 16/07/2024S by

author Nevrie
Nevrie, Co-Founder @ wonderform.io

Hi there, it's Nevrie, the co-founder of WonderForm.

In this guide I want to show you all the customization possibilities with WonderForm!

We understand that it's important to be able to customize as many elements as possible and to achieve the look that matches your website, this is why we have dedicated a lot of time to provide all the possible customization options.

So let's get started!

1. Login

To start, you'll need to login to your WonderForm account. You can do so by clicking on the following link: Login.

2. Access Look and Feel

Go to the font studio page in the following link: Look and Feel.

Once you are here, you will see all the possible settings for the WonderForm widget.

WonderStar: Enable or Disable the AI Wonder Star that appears in the widget.

WonderForm wonder star

Widget Mode: You can choose between inline embed and a float widget that appears on the right or left side of your website.

WonderForm widget mode

Writing Animation: Choose the style of animation for the questions: Fadein, Typewriter or None.

WonderForm writing animation

Layout Density: Choose between a compact and simple mode or a full mode.

WonderForm layout density

Content Direction: Choose how to align the content within the widget: Left, Center or Right.

WonderForm content direction

Text Direction: Choose how to read text, from right to left or left to right.

WonderForm text direction

Emphasized Sentences: This setting will bold certain sentences from WonderForm's responses to make them stand out.

WonderForm emphasized sentences

Corner Style: Choose the corner style for the buttons: Cornered, Dubbed or Round.

WonderForm corner style

Button Style: Choose the button style for the buttons in the widget: Filled, Outline or Text only.

WonderForm button style

Float Mode Settings

When the widget is in float mode, which can be embedded on the left or right side on your website, there are additional settings.

Let's go over them and see what they can do.

Shadow: Choose the shadow for the widget: Dim, Medium, Spotlight or None.

WonderForm shadow

Placement in Website: Choose where the widget sits on your website: Left or Right.

WonderForm placement

Height and Width: Choose the height and width of the widget when opened.

WonderForm height and width

Vertical and Horizontal margin Decide how much space is between the widget and the window vertically and horizontally.

WonderForm horizontal and vertical margin

That's it!

There are all the font options you can use for your WonderForm widget.

Pull out your palette and start painting. 🎨