Customize the widget's design

On the Design page you choose how the widget button looks and where it sits. Every website in your account has its own design, and changing it never changes your installation code.

Before you start

• Pick the website in the website switcher at the top of the left menu – the design belongs to the website selected there.

Change the design

1. 1

   Open the Design page

   Click Design in the menu. The page has the cards Widget Design, Color, Widget position and Language. The Preview card on the right shows your changes right away, for desktop, tablet or mobile.

   

2. 2

   Pick the icon, size and border

   Under Icon, click one of the six icons, or upload your own with Custom icon. Under Size, pick one of four sizes (44, 52, 60 or 68 pixels), or set any size from 44 to 80 pixels with Custom size. Border adds a white ring so the button stands out on busy pages.

3. 3

   Choose the color

   In Color, click one of the eight colors, or click Custom color to pick any color – for example your exact brand color.

   

4. 4

   Place the button

   In Widget position, choose Desktop, Tablet or Mobile, then click one of the eight spots in the picture. Adjust Distance from edge if you like. Each device has its own spot, its own distance and its own Hide on … switch.

   

5. 5

   Save your changes

   Click Save changes at the top right. You see "Changes saved", and the button changes to Saved.

Good to know

• Readable on any color: allyWay uses white or dark text and icons on your color – white whenever it reaches a contrast of at least 4.5 to 1, otherwise a very dark gray, or black where even that falls short. More about color contrast.
• Your own icon: an SVG or PNG file of up to 200 KB. It's recolored white or dark to fit your color, so only its shape remains – simple, one-color shapes work best. SVG stays sharp at every size; a PNG should be at least 256 × 256 px.
• Smaller screens: on tablets the button is shown a little smaller and on phones a bit smaller again – never below 44 pixels.
• Devices: allyWay goes by the width of the browser window: under 640 pixels is Mobile, 640 to 1,023 pixels Tablet, 1,024 pixels and wider Desktop. Icon, color, size and languages are the same on all devices.
• Where the menu opens: on the same side as the button – on the left for the left spots, on the right for the right and center spots. Pick a spot where the button doesn't cover your own buttons, chat bubble or cookie banner.
• Hiding the button on a device also hides the widget's tools there. Think carefully before hiding it on phones, where many people with disabilities browse.
• Unsaved changes: Discard in the top bar goes back to your last saved settings. If you leave the page with unsaved changes, a window asks whether to save them.

Check that it works

After saving, click Preview at the top right: your website opens in a window with the widget button – click it to try the menu. Then reload a page of your website: it shows the new look. In the preview, the tools change the preview window, not the website shown in it, and allyWay's AI fixes aren't applied there.

Troubleshooting