View Categories

Create a Whatsapp button

2 min read

You can add a Whatsapp button to your website with the following steps:

  1. Add an ‘Icon’ widget to the page.
  2. Click on the icon in the sidebar to change is.
  3. In the popup search for ‘Whatsapp’, select the Whatsapp icon and click on ‘Insert’.
  4. In the link field, type ‘https://wa.me/YOURNUMBER’, use the international format for your phone number, so for example: https://wa.me/+31625280707.
  5. Under the ‘Advanced’ tab in the sidebar, at ‘Width’ select ‘Inline (auto)’.
  6. Under the ‘Advanced’ tab in the sidebar, at ‘Background’ you can select a background color. The official color of Whatsapp is #25D366.
  7. You can also set a color under ‘Hover’ to change the color when people hover their mouse over the button.
  8. Optionally, under the ‘Advanced’ tab in the sidebar, at ‘Border’ you can set the Border Radius to 100% to make the button round.
  9. Under the ‘Advanced’ tab in the sidebar, at ‘Layout’ you can give the button some padding to create some space around the icon. For the Whatsapp button a padding of Top: 10, Right: 10, Bottom: 3, Left 10 (px) makes it well-aligned in the center of the button.
  10. Under the ‘Style’ tab in the sidebar, you can set the size of the icon, for example 30px. You can also change the color of the icon here.
  11. Optionally, if you want the button to be in the corner of the screen, you can go to the ‘Advanced’ tab in the sidebar and at ‘Position’ select the option ‘Fixed’. You can then set the Horizontal and Vertical location of the button, so it will be on a fixed position on the screen’. If you notice that the icon falls behind other elements on the website, you can add number in the Z-index field, for example 100, to let it be on a higher layer above other things.