Customizing your Widget

Configure your Widget layout and appearance with this quick explainer article

Step 1 - Access your Widget

Make your way to the Apps page and pull up the widget you're looking to customize. The page you're seeing now will be referred to as the Widget Editor.

Step 2 - Customize the Widget Layout

Click on the Layout tab to start customizing how your audience will access and interact with your widget on your site. Below, we'll break down each of the options in this menu and how they affect the look and feel of your widget.

The first toggle in the Layout tab will configure the default height of the widget. This refers to the size of the widget and how much of your audience's screen it will take up when activated. Notice the height of the widget changing as you toggle from Full Height to Floating and back again.

The next toggle down in the list is your alignment, or, which side of the screen the widget will be activated on. Note that this toggle will not change the widget button and where/how it appears.

The last toggle we will focus on in the layout menu is the button type of your widget. You can choose between two main options. A Custom button type will add some additional code to the widget embed that you can customize on your site to match any style or design you wish. As long as the "href" code we provide in the button is unchanged, the widget will be activated when your audience clicks it. By default, this "button" will be some hyperlinked text that reads "Open Widget".

In the above screenshot, the code you will want to avoid changing is the following.

The other button type for widgets is a Preset button, which uses a default button style and allows you to choose the location of it on the screen. Notice the button change location as you select different locations in the dropdown.

There are some other toggles you can customize below the button type, including whether or not to show your audience their recent searches and allow for filtering, so be sure to play around with those too before moving on.

Step 3 - Customize the Widget Appearance

Head back to the main editor tab and click on the Appearance menu. Here is where you will configure the colours, logo, typography (font), and theme options for your widget.

Scroll through these options and add your own branding. If your logo also contains a name, you may want to consider turning off the Widget Name toggle. Want to give your audience an example of a term they can search? Update the Search Placeholder text to include an example search term. On the Pro or Business plan? Remove the Searchie logo to integrate the widget into your site seamlessly (know that the logo is actually your affiliate link and anyone who clicks it and signs up for Searchie will provide you with a 30% commission on any of their payments).

This menu is where you make the widget look like it's just another sweet perk of consuming your content by matching it to your brand and business. Play around with the various options and be sure to share your final product on our social channels!