WAZZUP Help

Site widget

In any business field, communication with your clients is vital. Inside your Wazzup widget, you can place buttons for feedback and important links. You can embed your ready-to-use widget’s code into your site’s HTML, building block, or CMS.

If you do not yet have a site, you can create a business card website and post the link to it on your social media and use it in your advertising.

To create and configure your business card website, you need to sign up for your Wazzup personal account.

How to create a widget for your site

Go to the “Business card website” section and click on “Add widget”:

In the right side of the tab, you can see a preview of your widget. All changes are displayed in real time.

In the left side of the screen, there are two tabs: “Appearance” and “Messengers”. In the “Appearance” tab, specify your widget’s name. This information will only be visible to you and will be displayed in the “Business card website” section:

Then input the text for your business card below: your company’s name, offer and description.

After that, configure the visuals: your user image and the background:

 

Proceed to add different contact methods and all the necessary links.

How to add contact methods into your widget

To connect a communication channel to the widget, go to the “Messengers” tab and click the “Adding messenger” button.

In the pop-up window, select the messenger, social network, or link that you want to add to the widget.

Fill in the details of the account that will receive messages from users. Save the settings.

Specifics of adding each communication method

WhatsApp

Enter your phone number in the international format as shown in the example below. The phone should start with a 7, without a plus (+). In the “First message text” field, you can add a greeting for your client.

The WhatsApp button will redirect your clients into a browser. Your clients will be able to choose between a desktop version of the application and WhatsApp Web. On a mobile device, the button will send them into the WhatsApp application.

Telegram

Enter your user’s name without an ‘@’ sign.

The Telegram button will redirect your clients into a browser. Then they will choose whether they would like to proceed with the installed application or with the web version of the messenger. On a mobile device, the button will send them into the application.

Viber

The Viber field supports two kinds of links:

  • Links to the chat. To redirect your clients to a chat, enter a phone number beginning with a 7, a plus (+). For example: 79031231212.
  • Links to the group. Enter a group link beginning with “https://invite.viber.com/”.

VK

Enter a community ID. In the “Link type”, you can specify what subpage to send your site visitor to when they click the VK button. If you choose the first option, visitors will be sent to the community’s home page. If you choose the second one, a dialog box will open letting visitors to send you a message or start a bot.

Twitter, Instagram

Enter an account name into the field prefixed with an “@”.

The buttons will send your client to the account’s home page.

Facebook, YouTube, OK

Only enter your user ID (from your browser’s address bar) in the corresponding fields. The beginning of the link is predefined in the settings.

The button will send your client to the main page of your community, group or channel in their browser.

Messenger, WeChat

Only enter your user ID (from your browser’s address bar) in the field. The beginning of the link is predefined in the settings.

The button will redirect your client to the chat with the company or user.

Skype

Enter your unique ID in the field.

The Skype button will send your client to the browser and invite the user to install the application or proceed to the one installed.

E-mail

Enter your e-mail in the field. The button will send your client to their default mail application.

Link

You can put important links and set your own names for the buttons.

For instance, if clients often ask you for your portfolio, price plans and any other specific document, upload these to a public site and attach the links to your widget. Your clients will be able to understand if they need your goods or services even before they decide to contact you, and you will save time taken up by answering typical questions.

To do this, put your link into the field at the top and then specify the button’s name in the field at bottom.

You can put several buttons with links into the same widget. These will redirect your clients to the page you have specified.

Buttons placement, sizes and removal

There are 3 buttons to the right of the name of the connected messenger.

Change or delete messenger

If you need to change the account number, name, or replace the messenger itself, click the button with the pencil image. You can immediately delete the messenger from the widget.

To change the size of the button

You can arrange the buttons two in a row or stretch them to their full width.

To change the size, click on the button with multi-directional arrows:

To change the location of the button

To change the order of the buttons in the widget, hold the icon with three dots and drag the item into the preferred position in the list:

After you have added all contact methods, click “Save” in the top left corner of the tab.

How to add your widget’s code to your website

After configuring the widget, the system will generate its embed code:

If you are working with a CMS:

  1. Copy the widget’s code;
  2. Insert the code on the pages where you need the widget to be displayed. For example, if you want to add a widget to every page, add the resulting code into the file responsible for generating the footer of all the site’s pages. If you use several CMSs for your website, put the widget’s code in all the necessary places.

If you are working without a CMS:

  1. Copy the widget’s code;
  2. Add the widget’s code to the HTML code of those pages of your site where you need the widget to be displayed. We recommend to place the widget near the end of the “body” element so that it does not slow the loading of the page.

You can also add the widget using a tag management system if you are using it for your site. Such systems allow you to store all the necessary HTML/JavaScript code on an external server and just plug it in your web pages. Changing the plug-in code does not require changing your website’s pages.

In this case:

  1. Copy the widget’s code;
  2. Create a custom tag with the widget’s code and configure an event to execute this tag. For example, it can be executed while looking at any page of the site or some specific ones.

If you are working with a site builder:

  1. Copy the widget’s code;
  2. Add an HTML block and insert the widget’s code into it.

How to add the widget’s placement on the site

Choosing the widget’s position on the site is not provided. You should change the code yourself or have your web designer do it for you.