uKit
FAQ – Widgets

Widgets are the essential building blocks of your website. In the Builder, you will find a big collection of widgets, and we regularly add new ones to expand the functionality of your website. The widgets can be found in the Builder under the Widgets tab.

They are grouped into several categories:

  • Basic
  • Structure
  • Content
  • Media
  • Contact
  • Social

BASIC

The name speaks for itself, these are the basic elements for a website. Among them are the text-based elements like Title, Text, and Quote, multimedia elements such as Image, Icon, Gallery, Slider, and the Button widget. The HTML Code widget is available within the Pro Plan.

STRUCTURE

Widgets from this category will help you organize your website's layout with the help of spaces and separators.

CONTENT

Under the Content tab, you will find a number of widgets that allow you to add content of different types to your website. For example, the Card and Price List widgets will help you showcase your products in a visually pleasing manner and describe their properties. If you want to sell products directly on your website, you can use the Ecwid Store widget. Other widgets will also allow sharing different kinds of content.

MEDIA

These widgets will allow you to share different media content such as files, video, music, or presentations.

CONTACT

Contact widgets are there to help your website visitors get in touch with you, sign up for newsletters, interact through the contact form, request a callback, find your location or get help from the support agent via an online chat on your website.

SOCIAL

Social elements are perfect for adding popular social media widgets to your website so that your visitors could easily find you on Facebook or Twitter.

All uKit widgets are customizable. You can and should edit them to fit the content of your site instead of leaving the default content that comes with the design. The initial step to edit any widget is to click on it, after which the settings panel will appear on the left.

Below is the list of main widgets the customization of which is of great importance to your website:


To navigate to the contact information edit form, you need to click on the pencil icon next to the desired item. In the window that will appear on the right, you will be able to provide your contact details. If your business has several branches, you can specify them by clicking on the Add button to create a new office.

In the contact information edit form, you can fill out the provided fields or, if they are not enough, add new, additional ones.

To edit the name of the additional field that you created, click on the pencil icon next to it. If you no longer need a field, click on the trash icon and it will be removed from the list of fields with contact details. If you want to rearrange the order of fields, grab an item and move it up/down to the desired place.

In the settings you can configure appearance of the fields.

The Social Networks widget allows you to place social buttons onto your website so that your visitors could easily check out your presence on social media. The buttons can take to your community, group, personal or public page. In the widget settings, you need to enable the social networks you’d like to have displayed and specify the links.

You can reorder your social networks by dragging and dropping them on the left panel.

The Maps widget will help your potential clients to find you, learn your business hours, and directions.

Map type

When placing a widget, you are offered 3 mapping service options to choose from: Google Maps, Yandex.Maps, and Bing Maps. In rare cases it may happen that your address is missing from the map. In such a circumstance, try labeling your place with another mapping service.

Map markers

If you have already added your contact details to the Contact Information widget, the address you’ve specified there will be used as a map marker. To place a map marker, you either need to provide an address or location coordinates. You might also want to add a heading and description for the map marker that will appear upon clicking on it. If you have several offices or branches, you can feature them too by clicking on the Add map marker button.

Get social by adding widgets of popular social networks to your website: Facebook, Instagram, Twitter, and Pinterest. To connect them, you just need to provide a link to a social profile or connect, after which you can proceed to setting up the widget’s appearance.


The Video widget makes it possible to add videos to the pages of your website. You can use videos hosted with such popular providers as YouTube and Vimeo. After placing the widget onto the website, you need to go to the widget’s settings and provide a link to the video that you’d like to see added.


Note: Before adding a video to your uKit website, make sure that the video’s settings allow its embedding on third-party websites.

To create an online store with uKit, you need to use our built-in Product widget. Once you add the widget to the website, the store settings are immediately activated.

In the settings of the Product widget, you can:


You can add as many products to your website as you want. To navigate to the store settings, click on the cart icon in the top right corner of the Builder:


From there, you can access the following tabs:

  • Settings let you select your store’s currency and choose an action that is completed when items are added to the cart.
  • Order form allows specifying your contact email where store notifications will be forwarded to, fields of the order form, and also the text of the message that will be sent to a customer.
  • Shipping makes it possible to manage your shipping options. The shipping can be offered for free or set to a fixed price.
  • Payments allow you to change payment methods that will be available to the client.

Note: For the time of beta testing, the online store functionality is free of charge and available on all pricing plans.


You can also customize the look and feel of the cart by clicking on it. You can set up the cart's color and the text that appears on it.

If you need a more active user engagement, a live chat is a perfect solution. It will help you monitor traffic in real time and provide live support to your customers.

To add the live chat widget: from the left menu select Builder > Widgets > Contact. From there, you can choose any of the 3 live chat options: LiveChat, JivoChat, and Live Agent.

Grab the widget and drop it to your website either to the bottom right or bottom left corner. Click on the widget to open the settings and connect an existing live chat account or create a new one.

An online store can be set up with the Ecwid widget: Builder > Content > Ecwid Store. Place the widget to the desired area on your website and click on it. On the left you will see a menu with Ecwid settings. Connect your existing Ecwid account or create a new one. For detailed information about Ecwid online store, visit http://www.ecwid.com/pricing.

Alternatively, the online store can be created with the help of the Card widget: Builder > Content > Card. Drag the widget to the desired area of your website and set up its design. You can customize the card by adding a product picture, description, and price. To make it possible for visitors to place orders, attach order windows to the buttons. Integrate as many cards as you want until you get a product gallery that matches your business needs.

There are two ways to do it:

#1 An online store can be created with the help of the Card widget: Builder > Content > Card. Drag the widget to the desired area of your website and set up its design. You can customize the card by adding a product picture, description, price and a Call-to-Action button. Integrate as many cards as you want until you get a product gallery that matches your business needs.

#2 Alternatively, you can add a price list with descriptions of your products and services. For that, in the Builder, open the Content tab and select the Price List widget. Drag it to the desired location on the website.
To configure the fields, click on the price list and edit the settings from the left menu. You can also assign an order form to the buttons in the price list. This way, your website visitors will be able to easily place orders for your products and services.

You can add up to 10 images in the Slider widget. If you want the slider to be free of any texts and buttons, consider using the Gallery widget and selecting the Slideshow design for it. In this case, the number of images is unlimited.

You can allow comments on your posts in the Blog section of your website. To create a blog, on the left hand menu select Site Pages > Add page > News

Create your first post here and click on it to open the settings on the left. From there, enable the Disqus commenting system.

Click on the Disqus message that will appear under the post.

Connect your existing Disqus account or create a new one.

To upload a file to your website, use the File widget which is located on the left panel of the Builder under the Media tab.

The maximum upload file size is 30 MB.

AmoCRM is a customer relationship management (CRM) system. It helps to keep track of all orders that are submitted through contact forms on your website. You can enable AmoCRM for all feedback forms, pop-up windows, and the Product widget.

Note: AmoCRM is a paid service. For more information on pricing plans and terms, please visit their website.

Where to find: The AmoCRM widget can be activated in the Site Widgets section of your website's Dashboard.

You will be offered to create an account directly from the Dashboard, or, if you already have one, connect it there.

Creating a new account

To create a new account, you need to enter your name and email address. The password to access the AmoCRM system will be sent to you by email. After that, click the Create account button to connect the CRM system.

To complete the registration, log in to AmoCRM and finalize the signup process by submitting the necessary information.

Where to find the account address, email, and API key

If you already have an AmoCRM account, you can connect it by clicking on Connect an existing account and entering your account details. They are as follows:

  • Account address. Here you need to specify your AmoCRM account's subdomain.
  • AmoCRM email. In this field, enter the email that your account was registered with. To look up the email, navigate to Settings > Users & Rights. Find the admin's account and specify their email address.

  • API key. This key is needed to bind your account to our builder. You can find it under the API tab of the Settings section.

Setting up forms

Note:

Verify your email address to ensure the correct operation of contact forms.

Once you connect AmoCRM, all messages that your clients send through feedback forms will be stored in the Leads section. More than that, each client will be recorded in the Lists section.

If you would like your clients to be collected in the lists, make sure you configure the necessary fields in the forms. For the contact to be generated in the Lists section, set the Name field as required. We also recommend that you include at least one of these two fields into the form: Email or Phone number.

You can configure the following forms:

  • Contact form
  • Pop-up windows
  • Order forms in the online store

Contact form

In the settings of the contact form, enable the Name field and make it required. It is also recommended to activate the Email and Phone fields. This way, you will be able to split your clients more accurately and sample them on a more precise level.

Pop-up windows

Pop-up windows have the same configuration logic. By default, the Email and Phone fields are active there.

Attention!

By default, the Name field is not enabled in pop-up windows. If you would like to gather contacts for these forms, you need to activate this field and set it as required.

Note:

If you are in doubts as to whether you chose the right field type for your form, we recommend to delete the existing field and add it once again.

Order forms in the online store

Go the store settings to enable the desired fields. Navigate to the Order form tab and make sure that the necessary fields (1) such as Name and Email are active. These fields are marked with special icons. If the fields are deactivated, you can enable them and set the desired types.

In the Builder mode, select the Product widget and proceed to its settings. On the left panel in the Product Option section, click Add option:

In the window that will open, set the values and modifiers. In total, you can create up to 3 options with an unlimited number of values.

For each option in the Extra fee field you can set a modifier for the original price. The modifier is added or subtracted and can be a fixed value or a percentage of the product value. To use a percentage of the value, simply type the percentage using the % sign and to subtract a fixed value, use the minus sign. If you don't want the original price to be changed, just keep the Extra fee field empty.

Go to the store settings and open the Payments tab. In the Connect payment methods section, choose PayPal and click Connect:

If you don't have an account in the PayPal payment system, create one.

Go to the settings of the online store and open the Payments tab. Under Configure payment methods, select Wallet One and click Connect:

If you don't have an account in this payment system, create one.

Specify the Shop ID (it is diplayed in the account settings of Wallet One).

How do I get the MD5 key?

In the uKit store settings, type the key into the Digital signature (MD5 key) field. The key can be found in the account settings of Wallet One under the Integration tab. To copy it, enable the MD5 option next to EDS creation method.

Copy the script URL from uKit and paste it into the account settings at the Wallet One's end.

You can keep the default name and description of the payment method or customize them. Once you filled out the form, click on the Connect button.