# Learn to create Powerful websites in few minutes

Vintcer is a powerful and easy to use drag and drop website builder. Vintcer is fully customizable and and powerful. You only need few hour's to explore it's capabilities.


# Introduction to Builder

Each elements, sections/blocks and other thing in Vintcer are fully customizable. You can decide their Appearance, size, padding, other dimensions, effects and animation etc. Read more below-

![](/files/-LBozseVItn1wVsbUJ1j)

### 1. On top right corner you'l find setting regarding SEO, Account, Language, Page Manager, Site Manager, Page setting, Page widgets etc. See the image below-

![](/files/-LBp5F-wjxV15WFVxvXT)

{% hint style="info" %}
Backup button and option to connect your own domain is only available to premium members. It will be available once you upgrade. Checkout our awesome pricing here- [www.vintcer.com/pricing](https://www.vintcer.com/pricing)
{% endhint %}

### 2. On top right corner you'll find Undo, Help, Backup, Save, Preview and Publish button.&#x20;

![](/files/-LBozcrqCYSdH8h4rQsw)

{% hint style="info" %}
Click on the Blue colored + button to open section menu (as shown in below images)
{% endhint %}

![](/files/-LBp3gGmHD4dEY2SH3Vn)

### 3. Each section has it's own settings and Pro settings for Full Customization. Click on section setting tab to open open Setting Window

![](/files/-LBzZIcCtw8LU2aSwsxe)

You can add more Elements from setting (you can also directly add elements).

### 4. Click on the Pro tab to open pro settings where you can decide the Alignment, Spacing, Height and width of Each element.

![](/files/-LBz_08S-bL0iwvrQ7I2)

### 5. You can add  F/X, effects and Animation from F/X tab

![](/files/-LBzaLhax64vg73k_7JU)

### 6. You can choose lots of sections and widgets from different categories.

![](/files/-LBp4VRV3nnLB_-sQp4F)


# Getting Started

{% hint style="warning" %}
Click on **Publish button** to Save the changes you made in your website. Clicking on Publish button also generates a **Free preview Domain**.
{% endhint %}

Creating a website Vintcer is very easy . Click on the login button or visit - <https://app.vintcer.com/start>

Login/Sign up button are available at the **top right corner**.

![](/files/-LBoabvae5R9nNUIXD1G)

1. Click on Create a new website button.

![](/files/-LBobzC68PyOK9wwhpsk)

2\. Now, choose a theme to start creating your website. (You can change the theme later)

![](/files/-LBocNIBFkZkxnC9p_EA)

3\. Click on edit button to continue&#x20;

![Click on the Green color Edit Button](/files/-LBocRcg12vO_jEOJwIc)

4\. Select a Username, enter your email address and choose a Password. (No credit Card required)

![](/files/-LBocoyYvb7nLIKl65Z1)

5\. After clicking on Join button your website will open in Editor.

![](/files/-LiYFaLAn0s72yBw7nrD)

Read the next Article to know more Editor and Important TIPS.


# Create a New website.

You can create as many website as you wish from the same account.

Open Website Manager from- <https://app.vintcer.com/my_sites>

**Login into your account By clicking on Join/sign link from the top right corner.** The click on the create new website button as shown in below image.

![](/files/-LC3SgaYsaBWZGDkMSYg)

After clicking on Create new website button choose a them and start creating your new website.

## Important Tips

1. **When you edit a website/template for the first time, click on SAVE button to Save it into your account from next time please click on Publish (Green button right corner) button to Save the changes in your website instead of clicking on SAVE button**

![](/files/-L_WnndqaFxgFzdU3sLl)

2\. Click on **Publish button** to Save the changes you made in your website. Clicking on Publish button also generates a **Free preview Domain**.


# Hosting FAQ

Learn more about where we host your websites, server speed and server locations.

## FAQ

{% hint style="success" %}
**Vintcer provides you with free and unlimited hosting in all plans.**
{% endhint %}

## Where does Vintcer host user's websites ? <a href="#where-does-gitbook-store-user-data" id="where-does-gitbook-store-user-data"></a>

All websites are hosted on **Amazon Web server'**&#x73; Elastic Compute Cloud ([Amazon EC2](https://aws.amazon.com/ec2)).

Amazon Elastic Compute Cloud (Amazon EC2) is a web service that provides secure, resizable compute capacity in the cloud. It is designed to make web-scale cloud computing easier for developers. (don't worry you don't have to set up anything on AWS, when you click on Publish button your website will be automatically deployed to Amazon web server).

![](/files/-LKbsBpNmHzm_HRENTWF)

{% hint style="success" %}
We have servers in different counties and regions and these servers are more than enough to serve your website globally at blazing speed.&#x20;
{% endhint %}

## Where does Vintcer store media files ? <a href="#where-does-gitbook-store-user-data" id="where-does-gitbook-store-user-data"></a>

All user 's media files are stored in the US on [Google Cloud](https://cloud.google.com).

## What is Cross-Region Replication and how does it affects my website? <a href="#where-does-gitbook-store-user-data" id="where-does-gitbook-store-user-data"></a>

Cross-region replication is a website-level configuration that enables automatic, asynchronous copying of websites across serves in different Regions. All Vintcer website uses Cross Region Replication (CRR) by default. It helps to provide your website best possible speed.

**Minimize latency** – Your customers are in two geographic locations. To minimize latency in accessing your websites, we maintain website copies in different [AWS Regions](https://docs.vintcer.com/hosting#what-is-aws-region-and-why-they-are-mentioned-here) that are geographically closer to your users.

### What is AWS region and why they are mentioned here?

As we use the Amazon web server for hosting our website's. So, we refer to our server's locations with the term AWS region.

Amazon cloud computing resources are hosted in multiple locations world-wide. These locations are composed of AWS Regions and Availability Zones. Each AWS Region is a separate geographic area. Each AWS Region has multiple, isolated locations known as Availability Zones.

![](/files/-LKbsBpNmHzm_HRENTWF)


# Connect your own Domain

Learn how to connect a domain that you have purchased from third-party to your website is very easy. You only have to change A record and CNAME record to connect the domain to your website.

{% hint style="info" %}
&#x20;You need to subscribe a premium plan before connect your own custom domain (example- [www.yourdomain.com](http://www.yourdomain.com)). Checkout our awesome pricing here- [www.vintcer.com/pricing](https://www.vintcer.com/pricing)
{% endhint %}

{% embed url="<https://www.youtube.com/watch?v=Z29p3w5SmdY>" %}

### Click on connect an existing domain button to connect your own domain.

![](/files/-LBz79EDCu44Wt9T68eR)

### Enter your domain name and click connect.

![](/files/-LBz7H4RNhjEaqiIi3_l)

### Now, you domain is connected to your vintcer website but you have to change your DNS setting in registrar account, please follow these steps to configure domain:-

### **To connect your domain:**

1\. Log in to your registrar account

The registrar is where you originally purchased the domain. If you don't remember who your registrar is, you can use [whois.net](http://whois.net/) to find out.

2\. Locate the Control Panel or Domain Manager of your domain in your registrar account.

&#x20;The control panel allows you to change the DNS records from the default ones provided by the registrar.

Different registrars may have different control panel layouts and other names for it as well. You might find it under 'DNS Manager' or 'Domain Manager".

3\. In your registrar's Control Panel, change the A record and the CNAME:

| **TYPE**     | HOST    | VALUE                   |
| ------------ | ------- | ----------------------- |
| **A RECORD** | **@**   | **34.96.116.138**       |
| **CNAME**    | **WWW** | **connect.vintcer.com** |

![](/files/-Lj0ut4UukaHlfMMA-ZD)

Make sure to **SAVE** these changes.&#x20;

### **Few important notes:**

1\) It may take up to 24 hours for these changes to propagate worldwide.

2\) If there are previous A records in your DNS settings - make sure to delete them.<br>

Contact us if you need any help with connecting your domain to your website. You can chat with us from [here](https://www.vintcer.com) or write to us at <team@vintcer.com>

## FAQ

### I connected my domain but it's still not showing me website?

If you followed the instructions on how to connect your own domain but it's still not showing up, there are a few reasons for why it might happen:

1\. Not enough time has passed since you changed your DNS settings. It can take up to 6 hours for DNS settings to be changed at certain domain registrars.

2\.  Your DNS settings are not configured properly. There might be old A or CNAME records you need to delete, or you might have entered the wrong details. Double check that.

3\. You entered the wrong domain when you first publish your website. If that's the case, go back to the editor and hit 'Publish'. You'll then see the domain we linked this website to and an option to 'Change' it right below. Click it to change to the right domain.


# GoDaddy Domain- Connect GoDaddy domain to your website

Connect your GoDaddy domain to your website in few minutes.

{% hint style="info" %}
This article explain connecting domain to your website. To learn how to verify your domain for Business email(email for domain) please check the respective article.
{% endhint %}

{% hint style="info" %}
Make sure to add your domain in Vintcer Dashboard too. To enter your domain into your Vintcer dashboard first click on Publish button and then enter your domain name.
{% endhint %}

1. Login into your GoDaddy account and click on the DNS button.

![](/files/-LHP8GCcB0tR6Yn1M17_)

2\. Click on ADD button to add new required records.&#x20;

![](/files/-LHPAC0rLAuVItXQ-FSV)

3\. In your registrar's Control Panel, change the A record and the CNAME:

| **TYPE**     | HOST    | VALUE                   |
| ------------ | ------- | ----------------------- |
| **A RECORD** | **@**   | **34.96.116.138**       |
| **CNAME**    | **WWW** | **connect.vintcer.com** |

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LBo_mo13rwfUpGj8X6-%2F-Lj0um63HBY-Va7RDcUB%2F-Lj0ut4UukaHlfMMA-ZD%2FScreenshot%202019-07-05%2017.05.34.png?alt=media\&token=4b830c33-fe03-4b82-9977-fcba6d23c40b)

Click Save button and wait for the DNS to propagate. Once the DNS starts propagating your website will be live.&#x20;

## FAQ

### I connected my domain but it's still not showing me website?

If you followed the instructions on how to connect your own domain but it's still not showing up, there are a few reasons for why it might happen:

1. You entered the wrong domain when you first publish your website. If that's the case, go back to the editor and hit 'Publish'. You'll then see the domain we linked this website to and an option to 'Change' it right below. Click it to change to the right domain.

2\.  Not enough time has passed since you changed your DNS settings. It can take up to 24 hours for DNS settings to be changed at certain domain registrars.

3\.  Your DNS settings are not configured properly. There might be old A or CNAME records you need to delete, or you might have entered the wrong details. Double check that.


# Connect NameCheap Domain

Learn how to connect your NameCheap domain to your website.

### [After connecting the domain from Vintcer Dashboard, Sign in to your NameCheap Dashboard to change the DNS settings.](/connect-your-own-domain)

### 1. Sign into your **Namecheap account** (The Sign In option is available in the top hat of the page).&#x20;

### 2.Select **Domain List** from the left sidebar and click on the **Manage** button next to your domain:

![](/files/-LBzDD2md660QJlevizl)

### 3. Navigate to the **Advanced DNS** tab at the top of the page:&#x20;

![](/files/-LBzDOn_6FwunF6DaWQQ)

### 4. Find the **Host records** section and click on the **Add New Record** button.

![](/files/-LBzDSBxDB9_wVcUVZv_)

### 5. Choose CNAME Record and then  A record from drop down options-

![](/files/-LBzFUSvgSUfPTJF8rBi)

### 6. Enter the Following DNS records-

| **TYPE**     | HOST    | VALUE                   |
| ------------ | ------- | ----------------------- |
| **A RECORD** | **@**   | **34.96.116.138**       |
| **CNAME**    | **WWW** | **connect.vintcer.com** |

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LBo_mo13rwfUpGj8X6-%2F-Lj0um63HBY-Va7RDcUB%2F-Lj0ut4UukaHlfMMA-ZD%2FScreenshot%202019-07-05%2017.05.34.png?alt=media\&token=4b830c33-fe03-4b82-9977-fcba6d23c40b)

Click Save button (Green colored Tick ✓) to save the changes.

Make sure to **SAVE** these changes.&#x20;

### **Few important notes:**

1\) It may take up to 24 hours for these changes to propagate worldwide.

2\) If there are previous A records in your DNS settings - make sure to delete them.<br>


# Google Domains- Connect google domains to your website

Open your Google domain registrar dashboard- <https://domains.google.com/registrar>

1. Click on Configure DNS button

![](/files/-LF_bOcyvhp98e43fkIx)

2\. Make sure you are using Google's default Name server, if not then please click on **Use the Google Domains name servers** button and click save

![](/files/-LF_cMg2sne5st6EmRiB)

![](/files/-LjxlqEdJBC1LG8gf0aX)

3\. In your registrar's Control Panel, change the A record and the CNAME:

| **TYPE**     | HOST    | VALUE                   |
| ------------ | ------- | ----------------------- |
| **A RECORD** | **@**   | **34.96.116.138**       |
| **CNAME**    | **WWW** | **connect.vintcer.com** |

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LBo_mo13rwfUpGj8X6-%2F-Lj0um63HBY-Va7RDcUB%2F-Lj0ut4UukaHlfMMA-ZD%2FScreenshot%202019-07-05%2017.05.34.png?alt=media\&token=4b830c33-fe03-4b82-9977-fcba6d23c40b)

### **Few important notes:** <a href="#few-important-notes" id="few-important-notes"></a>

1\) It may take up to 12-24 hours for these changes to propagate worldwide.

2\) If there are previous A records in your DNS settings - make sure to delete them.

Contact us if you need any help with connecting your domain to your website. You can chat with us from [here](https://www.vintcer.com/) or write to us at <team@vintcer.com>

## FAQ <a href="#faq" id="faq"></a>

### I connected my domain but it's still not showing me website? <a href="#i-connected-my-domain-but-its-still-not-showing-me-website" id="i-connected-my-domain-but-its-still-not-showing-me-website"></a>

If you followed the instructions on how to connect your own domain but it's still not showing up, there are a few reasons for why it might happen:

1\. Not enough time has passed since you changed your DNS settings. It can take up to 6 hours for DNS settings to be changed at certain domain registrars.

2\. Your DNS settings are not configured properly. There might be old A or CNAME records you need to delete, or you might have entered the wrong details. Double check that.

3\. You entered the wrong domain when you first publish your website. If that's the case, go back to the editor and hit 'Publish'. You'll then see the domain we linked this website to and an option to 'Change' it right below. Click it to change to the right domain.

4\. You have not added the domain name in your Vintcer Dashboard. Make sure to click on Publish button and enter your domain name. Example- [www.yourdomain.com](http://www.yourdomain.com) (without any prefix and space)


# Change Themes

{% hint style="info" %}
As each of our templates are created using our builder only. So you can fully customize your websites as per your requirement. If you still want to copy section/blocks from other templates/theme please read the article below.

You can easily copy your favorites section from any templates. All other options like changing menu types etc can be configured form builder only.
{% endhint %}

#### First, open a desired template in new window and click on copy button (click anywhere inside a block and then from section settings click on copy button icon)

![](/files/-L_XBQnAcEj5uc9iittL)

#### 2. Go back to your website editor and click on blue colored icon to add a section.

![](/files/-LBqbaFPhOMJgS6ZuW6h)

#### 3. click on the paste button at the available at the lower left corner.

![Paste button is available at the lower left corner.](/files/-LBqbnkSDTHYCCKxx6YH)

Through this way you can copy any template without formatting your complete website and content.

\
If this method does not work, try changing your browser or  clearing cookies/cache. <br>


# Menu- Navigation Bar

Learn how to change Menu style, Links and design. We have lots of designs to choose from.

{% embed url="<https://www.youtube.com/watch?v=11ioEIjZ7qg>" %}

### Open the Site styling setting . From Top bar click on settings and then choose Site Settings.&#x20;

Choose Menu button, Next to the Style.

1. From top bar click on setting button and choose Site settings.

![](/files/-L_XCLKwkXUgq4QCD9qI)

&#x20;  2\. Now, Clic on Menu Icon to edit the Menu type

![](/files/-L_XCdxfFPR7MI3-wscp)

### You can choose the Menu style from available options-

![](/files/-LBvJvD6b7tAvhNqYF3X)

### Click on MENU Type and Click Publish button to make your new settings live.

## Hamburger (Menu) Size, Animation and other settings.&#x20;

![](/files/-LBvLLGNxSc66HPrjcwp)

After choosing a MENU style, click on the edit button.

![](/files/-LBvLWJGREobtLJUPNJY)

Now, choose the Animation (effect) and Hamburger Size.

![](/files/-LBvLiBZ5H7hXIxHR8b_)

Once done with above settings. Click on Publish button to save the changes.

{% hint style="info" %}
More Menu settings can be changed from Pro settings. A premium license is required to change the Pro settings. You can purchase a premium license from here- <https://www.vintcer.com/pricing>
{% endhint %}


# Adding Drop-down menu list in navigation Bar

Drop-down menu options will appears when you select an item with a mouse. The item you select is generally at the top of the display screen, and the menu appears just below it,

{% embed url="<https://youtu.be/11ioEIjZ7qg?t=113>" %}

![](/files/-LFQ3O7X9lXapn0nntjN)

Open the menu settings by clicking on Menu (see the above video)

Click on settings.

![](/files/-LFQ5Hb-NgdVuoYBD3W4)

Click on Arrange (Next to Type and settings Link)

![](/files/-LFQ5Xj3gjaFEVMR_B1I)

Hove over the Menu Links and few arrow will appears.

![](/files/-LFQ88X2XJK_pvpN4NRq)

Use the Arrow button to create Drop-down List.

![](/files/-LFQ5kJ-Xd6KdcJFMJNq)

![](/files/-LFQ8TP9aFF5kZ0LQOdS)

Click on the Publish button to make the changes.


# SEO and Favicon

Learn how to update SEO, Favicon and social preview image.

Open the [SEO editor](https://www.vintcer.com/my_sites). From the Top bar, click on Setting and choose SEO.  See the image below-

Fill the details Title, Keywords, Description etc.

![](/files/-LLVoqna1J6TXKEQUAuo)

Click on Upload Favicon to Upload the Favicon. And click on Social preview button to upload a image that  will be used by Social sites when someone share your website.

![](/files/-L_XESd2ljZnYHCEu88K)

## Title-

### What are  Title Tags  and why they are Important?

Example-&#x20;

![](/files/-L_XEtu7IZm0HHlHHd-8)

Title tags are important because they let readers know what information will be present when a user clicks on a page.

They are important for the search engines for the same reason, except they also function to determine the relevancy of the web page as a result in a search query.

If Google doesn’t like your title tag, then they may change it to better suit their / user needs. If this happens, you can bet it most likely won’t be to your liking.

Title tags should be between 50-60 characters in length. Google has not specifically come out and said that title tags should be this length; however, if your title is longer than 60 characters, you risk the chance of it becoming cut off in the middle.

## Description -

The meta description is an HTML attribute that provides a brief summary of a web page. Search engines such as Google often display the meta description—typically up to 160 characters long—in search results where they can highly influence user click-through rates.

Example-&#x20;

![](/files/-L_XFSVK3QE8KNr3AzxI)


# Button Designing

Learn how to customize Appearance, color, border, width of button in your website.

## Button Design Basics

{% hint style="info" %}
This method works with all buttons and sections or blocks.
{% endhint %}

{% embed url="<https://www.youtube.com/watch?v=5cf5iNuk2lw>" %}

####

#### Click on a button and then click on power (design icon) to open the button design settings.

![](/files/-L_XFyFI3nV5yCST0UW5)

#### After Clicking on Button Style a Button Style Manager window will appear.&#x20;

![](/files/-L_XGLfidgaJJT07LQXT)

From Button effects you can choose type of effects/Animation like-&#x20;

Clear, Color Stretch, jump, Underline, Color Slide, Color Fade, Grow, Shadow etc.

![](/files/-LBzNvdQf9TL3EO9AInS)

You can change border color, border Width and radius and Hover Color etc.&#x20;

![](/files/-LBzPNDGgx3KQ1K3LdMX)

## Pro settings for Buttons

{% hint style="warning" %}
Pro settings are only available to Paid users. You can purchase a premium license from here- <https://www.vintcer.com/pricing>
{% endhint %}

Click anywhere in a Block and then select Section setting

![](/files/-L_XGjLksb5xGEt9RVVw)

Choose Pro option from the setting option and then choose button spacing (Under spacing control) and modify the settings as per your requirements.&#x20;

![](/files/-LBzTAIG3IPlsBBKy8D1)

You can now adjust the dimensions for buttons.

![](/files/-LBzTK0kzHTFWr91N5OH)


# Slideshow builder and manager

VINTCER comes with a built-in powerful Slideshow builder and manager. This tutorial explains about adding Slides, removing slides, moving slides, effects on slides.

{% hint style="success" %}
This article explains about built in Slideshow builder, if you want to use third-party Slideshow widget please read this article- <https://docs.vintcer.com/custom-html-js-code>
{% endhint %}

![VINTCER comes with Powerful Slideshow builder and lots of easy to use customization options.](/files/-LiZKan3qEL9nkHW0J64)

### 1. Click anywhere on block/section and then choose section settings.&#x20;

![](/files/-LiZESkPKOlK33Pg6jqw)

### &#x20;2. After clicking on Section setting button, a setting panel will appear.&#x20;

### Now click  on Add Slide button, your exiting slide will be cloned, you can edit that slide by adding texts, background picture and videos, widgets like social, Buttons, PayPal button and much more.&#x20;

![](/files/-LiZEi-dNa-o8emuum7E)

### How to enable Autoplay for Slideshow?

1. From Slideshow setting panel, choose Slideshow settings

![](/files/-LiZGfcJhOpkXe3YKEuS)

2\. Click on the last Dropdown button to choose from from Manual or Autoplay option, Choose the Duration between slideshow as per your need.&#x20;

![](/files/-LiZGatxhU4Ni46lBxpR)

###

## Slideshow Layout

### You can change the Slideshow Layout, item width and margin,  align item for each slide from setting panel.&#x20;

From Slideshow setting panel Click on Item (next to the section)

![](/files/-LiZIe7aTVrqBbznmETi)

![](/files/-LiZIoC4pATWHBsb_9jU)

### How to move a Slide or change it's position?

Click anywhere on block/section, select **Item Settings** and the click on the Arrow button (< and >) to move it's position&#x20;

![](/files/-LiZLjDug2vJ0TAhVLig)

{% hint style="success" %}
Make sure to click on Publish button to save the changes and make them live on your website.

Feel free to contact us here-  <https://www.vintcer.com/support>

or via Live chat support if you need any help or support.&#x20;
{% endhint %}


# Custom HTML, JS code

Learn how to add your own HTML, JAVASCRIPT and CSS code into your website.

{% hint style="danger" %}
You can use your own code or third party code into your Vintcer website. Please test the code on a test/demo website before uploading it to your original website.

Adding a corrupt and wrong code can lead to serious damage to your website. So, Please test the code on a test/demo website before uploading it to your original website.
{% endhint %}

{% hint style="success" %}
In our latest update we have added the functionality to add your own code wherever you want please read more about this feature in next article or [click here](https://docs.vintcer.com/custom-html-css-and-js-code-in-sections-or-blocks).
{% endhint %}

### You can add HTML, CSS and JavaScript to your pages.<br>

#### To do that, click on the blue (+) you see when hovering between the different sections. &#x20;

#### You’ll see a menu on the left with different types of stripes to choose from.<br>

### At the bottom of this menu, click **Elements** and choose **RAW** or **HTML** from the options on the right:

![Click on the Sky blue + button to open Section Menu ](/files/-LBuWkvBDwNoGCjKTP2N)

### Now, Choose the Elements from Section Menu and then choose RAW (See the image below)

![](/files/-LBuYQVcrJ-MsEOU2ouW)

### After clicking on RAW, a RAW element will appear in your website (see the image below)

![](/files/-LBu_GmteeSSnNnqhJd1)

### Click on the element and choose **Edit RAW**

![](/files/-LBu_RkAcYl7bAnsFizr)

### After choosing Edit RAW and code editor will appear&#x20;

![](/files/-LBu_a1ByMHLGzQn6svb)

### Remove the default code and enter your own code and click SAVE button.&#x20;

Make sure to click on Update lIve site button or Publish button to see the code in your live site.


# Custom HTML, CSS and JS code in sections or blocks

In our latest release we have made it a lot easier for you to add or embed your own code or third-party widget to anywhere you want

{% hint style="danger" %}
Adding a corrupt and wrong code can lead to serious damage to your website. So, Please test the code on a test/demo website before uploading it to your original website.
{% endhint %}

{% hint style="warning" %}
This article explains about adding custom code, scripts, third-party embed codes to sections and blocks. If you want to add the code into body or in-line please read previous article or [click here](https://docs.vintcer.com/custom-html-js-code).
{% endhint %}

### Add a Section or block of your choice or use the one that are already added to your website.

### 1. Click anywhere inside section/block and then click on + icon/button

![](/files/-LiZQ8Alh8J7ngJAUfna)

### 2. Now click the Widget option (last widget in list)&#x20;

![](/files/-LiZRYqZHvfXGGsUmpNA)

### &#x20;3. A Widget panel will appear, click on **Code next to Parameters.**

![](/files/-LiZUoU8a9545-HxqEW7)

### 4. Now remove the default codes and  paste your own codes and click save.&#x20;

![](/files/-LiZveyrxeVJQib1T-oW)

{% hint style="danger" %}
Make sure to remove the default codes.&#x20;
{% endhint %}

{% hint style="success" %}
Click on Save button after adding your own code or scripts. **Click on Publish button to make the changes live on your website.**
{% endhint %}

{% hint style="danger" %}
Adding a corrupt and wrong code can lead to serious damage to your website. So, Please test the code on a test/demo website before uploading it to your original website. Feel free to contact us if you need any help- <https://www.vintcer.com/support>
{% endhint %}


# Google Analytics.

Google Analytics is a free analytics service offered by Google that tracks and reports website traffic.Google Analytics provides statistics and basic analytical tools for search engine optimization.

## What is Google Analytics

Analytics shows you data from all channels that are directing traffic to your website, including:

* Organic Search (SEO)
* Paid Search (PPC)
* Social Media
* Referrals (Backlinks)
* Direct Traffic
* Google Analytics is one of the top, most powerful tools out there for monitoring and analysing traffic on your website. It gives you an enormous amount of information about who is visiting your site, what they are looking for, and how they are getting to your site. Any business that wants to expand and grow their business on the internet should definitely be using Google Analytics.

{% embed url="<https://www.youtube.com/watch?v=lZf3YYkIg8w>" %}

Create or sign in to your Analytics account:Go to [google.com/analytics](http://www.google.com/analytics/)

Click SIGN IN > Analytics.Do one of the following:

To create an account, click More options > Create account.

To sign in to your account, enter the email address and password associated with the account.

[Set up a property in your Analytics account](https://support.google.com/analytics/answer/1042508). A property represents your website or app, and is the collection point in Analytics for the data from your site or app.

[Set up a reporting view in your property](https://support.google.com/analytics/answer/1009714). Views let you create filtered perspectives of your data; for example, all data except from your company’s internal IP addresses, or all data associated with a specific sales region.

## Install Google Analytics in your Vintcer website

Go back to the Vintcer Dashboard and open SEO editor.

![](/files/-LBqPUkuKun1DTV4TzzC)

Paste the tracking ID in Google Analytics ID column.

![](/files/-LBqPZPuLXUf3_Rnhv1F)

&#x20;Click on save button and then click Publish button to save the changes.

Visit <https://analytics.google.com/analytics/web> to access your Live Analytics data.

Contact us in Live chat or write to us at <team@vintcer.com> if you need any help with setting up Analytics to your website. We are always here to help you.<br>


# MailChimp Integration

Learn how to connect your Vintcer website to your MailChip account with few clicks.

{% hint style="info" %}
Prerequisite:- You need to subscribe a premium plan before using this feature.
{% endhint %}

### 1. Open the form setting by clicking on input column.

![](/files/-L_XI_h1ce9Q6x94xOLH)

### 2. After opening Form setting choose- add a user to a mailing list option from drop- down list

![](/files/-LBqCiNgGEmlrRDa6PRM)

### 3. Click on configure button.&#x20;

![](/files/-LBqCqv5EeF-EkZmsi-4)

### 4. Now, a communication dashboard will appear <br>

![](/files/-LBqD7kQUllonrhQRvVY)

### 5. Click on Setup button > Choose MailChimp from drop-down list

![](/files/-LBqDgP87I3HPtGhBAyQ)

### 6. Enter your MailChimp username and API keys to fetch your Mailing list.

![](/files/-LBqDtKNfHMGXp6s6bSC)

### To generate a MailChimp API key:-

1. Log in to your MailChimp Account [https://login.mailchimp.com](https://login.mailchimp.com/)
2. Click your profile name to expand the Account Panel, and choose  Account.

![](/files/-LBqE8B_Eh3jYbnl-pQt)

### &#x20;   3. Click the  Extras drop-down menu and choose  API keys.

![](/files/-LBqEYJNgIVozQBokPKO)

### 4. Copy an existing API key or click the  Create A Key button.

![](/files/-LBqEttQZx7p46r8jBwV)

### 5. Paste your API key into API key column inside Vintcer Dashboard <br>

![](/files/-LBqFPnp9-g9I4jks-q1)

### Click on REFRESH button to fetch your mailing list and click save.

#### Go back to the form where you want to connect the MailChimp mailing list .

![example- Vintcer (Name of MailChimp list)](/files/-LBqFdb1qVMRHNIxOWcN)

### Now you will see your mailing list name (example- Vintcer in above image/case) when you open Form setting, select the Mailing list and click save button.

#### Upon registration, the user will automatically be added to your mailing list.

### To send a file or file downloading link to new subscriber read the Next Article.


# Send a File to New Subscribers automatically.

You can send a File, email or download to your subscriber automatically when someone fill a Form on your website.

MailChimp offers two ways to provide a file to your contacts when they subscribe to your email campaigns. Since MailChimp don't allow attachments, MailChimp give you the option to upload your report, MP3, video, or other file type directly to their servers. They host the files for you, so you can link to the files for download in your campaign.

In this article, you'll learn about two ways to send a file to new subscribers.

**Add Your File to the Final Welcome Email**

After someone opts in to receive your email campaigns, you can send them a final welcome email to confirm their subscription and share an exclusive offer or file.

#### To add a file to your final welcome email, follow these steps.

1. Navigate to the [**Lists**](https://us1.admin.mailchimp.com/lists/) page.
2. Select the drop-down menu for your list, and click Signup forms.&#x20;

![](/files/-LBqGgWkjQP2Ry4FR2RN)

3\. Select General forms to open up the Form Builder.

4\. Select the Final welcome email from the Forms and response emails drop-down menu near the top of the page.\
\
5\. On the Build, it tab, click inside the dashed lines to open the editor. <br>

![](/files/-LBqGmCqoQb2w84VurZd)

\
6\. Type some text, like "Download your free song," and highlight it. Then, click the [**Link**icon](https://kb.mailchimp.com/campaigns/design/add-a-link-in-a-campaign).\
\
7\. In the Insert or Edit Link modal, choose File from the drop-down menu.\
\
8\. Choose or  [upload your file](https://kb.mailchimp.com/campaigns/images-videos-files/share-files-with-contacts), and click Insert.

9\. When your content is how you want, click Save & Close to return to the Form Builder.

To test the file you added to the final welcome email, you'll have to go through the signup process. Select **Sign up form** from the Forms and response emails drop-down menu to find your signup form URL.&#x20;

![](/files/-LBqGtZW6ejGDBLrViJX)

**Add Your File to a Welcome Automation**

A welcome message automation is a great way to greet new subscribers and help them get to know you.

To use a welcome message automation to send a file to new subscribers, follow these steps.

1. Navigate to the [**Campaigns**](https://us1.admin.mailchimp.com/campaigns/) page.
2. Click Create Campaign.

![](/files/-LBqH-PDYAxadnWXQGE5)

3\. Click Create an Email.&#x20;

![](/files/-LBqH7adiEkhy-BCWPQI)

4\. Click Automated.

![](/files/-LBqHOx0_HHngBiYWk1Y)

5\. Click Welcome new subscribers.

6.Enter your campaign name and choose a list.

7\. Click Begin.&#x20;

![](/files/-LBqH_ybsCTagxiMoCl1)

8\. When you get to the emails step, click Design Email to edit the default email in your welcome message automation.&#x20;

![](/files/-LBqHgYjyZbJRPe6GL-4)

9\. On the Design step, add your content and [follow the steps to create a link to your file](https://kb.mailchimp.com/campaigns/images-videos-files/share-files-with-contacts).

10\. Click Save and Continue.

Finish configuring your automation and click Start Workflow.

When the next person signs up on your list, they'll receive your automated email or email series with linked files to download.


# Share Files with Contacts with MailChimp

[MailChimp](https://www.mailchimp.com) offers free file hosting so you can add a file to an email campaign and share it with your contacts. You can upload and share many types of files including images, documents, spreadsheets, audio, or video.

In this article, you'll learn how to upload a file to MailChimp and share it with your contacts.

Note

* MailChimp offer file hosting instead of traditional email attachments because attachments can slow or stop bulk email delivery, or cause security software to completely block your email. &#x20;

**File Guidelines**

You can upload many types of files to your MailChimp account, and share them with your contacts. Each image file should be approximately 1MB or less, and other file types should be 10MB or less.

Here are the file types we allow in MailChimp.

![](/files/-LBqIGfEYJXgldPORPjE)

**Upload File and Share it in a Campaign**

In this process, you'll use the Campaign Builder's Link tool to upload the file to our Content Manager. We'll create a unique URL for your file and add it to your email campaign.

To upload your file and create a link to it in your email campaign, follow these steps.

1. Navigate to the Design step of the **Campaign Builder**.
2. Click an existing content box or drag and drop a new one into your layout.
3. Create the text or image you want to link and highlight it.

![](/files/-LBqINrZRlC3HI7xHspa)

4\. Click the **Link** icon.

![](/files/-LBqIYtqR7aFg8iJZFtj)

5\. Click the **Web Address** drop-down menu, and choose **File**.

![](/files/-LBqIpfQZ4KUAe8JpZYX)

6\. Click **Upload** to choose a file from your computer.

![](/files/-LBqIyslijaqPua3JZ7i)

7\. Choose your file, and click Open to upload it to the Content Manager.

8\. In the Insert or Edit Link pop-up modal, we'll automatically fill in the URL of your file.

![](/files/-LBqJ2a7_KSBiC3VYW2y)

To edit optional settings like whether to open the file in a new window or to apply aTitle Attribute or CSS Class, click Advanced Options.

9\. Click Insert

![](/files/-LBqJ6rpqkoMf7PoL7CF)

10\. Continue building your campaign.

After you send the campaign, contacts who click the link you created will be able to access your file.


# AWeber Integration

Learn how to connect AWeber account to your website.

{% hint style="info" %}
Prerequisite:- You need to subscribe a premium plan before using this feature.
{% endhint %}

1. Open the form setting by clicking on input column

![](/files/-L_XI_h1ce9Q6x94xOLH)

2\. After opening Form setting choose- add a user to a mailing list option from drop- down list

![](/files/-LBqKCTHwvEsNuCBBWaA)

3\. Click on configure button.

![](/files/-LBqKK5OYkMRkkIEm7zu)

Now, a communication dashboard will appear.

![](/files/-LBqKRnb80Qz0IkNtLER)

Click on Setup button > Choose AWeber from drop-down list

![](/files/-LBqKZiJViy3qRV_GiYm)

You need Auth Token to fetch your Mailing list

![](/files/-LBqKdTgmRMj6KdbQreb)

Click on the green colored Click to generate link and a new window will open.

![](/files/-LBqKhkP6b0B23ac_C04)

Enter your AWeber LOGIN/USERNAME and Password and Click Allow Access button.

Copy the Auth Token and paste it into  Auth Token column

![](/files/-LBqL6XBTHBxKNz0HhQ_)

Click on the REFRESH button and Vintcer will fetch your mailing list, Click Save button.

Go back to the form where you want to connect the AWeber mailing list &#x20;

![](/files/-LBqLCpx8WPTlRUcLEwV)

Now you will see your mailing list (example- Vintcer in above image) name when you open Form setting, select the Mailing list and click save button.

Upon registration, the user will automatically be added to your mailing list.

To send a file or file downloading link to new subscriber read the following article.


# Send PDF or files download link to subscribers.

### There are several ways to send subscribers your PDF/downloadable file including hyperlinking to a hosted URL, attaching the file, sending the PDF/downloadable file as a thank you page, or sending the PDF/downloadable file as the confirmation success page. This article explains each of these steps so you can use the one that best meets your needs.

**Hyperlinking The Hosted PDF File**

If your PDF/downloadable file is not already hosted online, you can host the PDF/downloadable file on your website or a third party site such as [Digioh](https://help.aweber.com/hc/en-us/articles/204031546-How-Do-I-Integrate-Digioh-With-AWeber-) or [Dropbox](https://www.dropbox.com/). Once you have the URL for your PDF/downloadable file, you can write a word/phrase in your message and [hyperlink the URL](https://help.aweber.com/hc/en-us/articles/204030066-How-Do-I-Put-Links-URLs-In-Messages-).<br>

![](/files/-LBqLkQi4dLFUr9ZOhZM)

**Attaching The File**

Depending on the size of your PDF/downloadable file, you can [attach the file to your message](https://help.aweber.com/hc/en-us/articles/204030016-How-Do-I-Add-Attachments-To-Messages-) if the size is less than 1MB. If your file is larger than 1MB, you could try compressing the file using a source such as [smallpdf](http://smallpdf.com/). Once the file is less than 1MB, you can attach the file to your message. Please note, the attachment limit is 1MB per message.

![](/files/-LBqLpD9iruwxKjcPKbE)

If you'd like subscribers immediately directed to the PDF/downloadable file after they sign up on your form, sending them to your [custom thank you page](https://help.aweber.com/hc/en-us/articles/204027586-How-Do-I-Change-My-Thank-You-Page-) can accomplish this. Each AWeber sign up form can use a custom URL for the thank you page. In the thank you page section, add in your custom URL for your PDF/downloadable file.

![](/files/-LBqLuDzoNKv_GdMSTSg)

**Sending The PDF/Download As The Confirmation Success Page**

If you'd like subscribers immediately directed to the PDF/downloadable file after they confirm your confirmation message for your list, sending them to your [confirmation success page](https://help.aweber.com/hc/en-us/articles/204028936-How-Do-I-Send-Subscribers-to-My-Website-After-Confirming-) can accomplish this. Each AWeber list can have a custom confirmation success page subscribers are directed to after they confirm. In the confirmation success page section, add in your custom URL for your PDF/downloadable file.<br>

![](/files/-LBqLxvKmFPTPK0incPS)


# SoundCloud Integration

There are many ways to add your SoundCloud song to your Vintcer website but this one is the fastest and easiest

There are many ways to add your SoundCloud song to your Vintcer website but this one is the fastest and easiest.

{% hint style="info" %}
You can also use a RAW element to embed SoundCloud Played to your website.
{% endhint %}

1. Open Section category by clicking on the Blue colored + button.

![](/files/-LBqRR4PQrr7UQg75ck3)

#### Click on Widgets,  inside section Menu<br>

![](/files/-LBqRb7yKulemSxIopIX)

#### Choose SoundCloud widget (highlighted with blue boundaries)

![](/files/-LBqRecvumOVRRXZbqQM)

#### A SoundCloud widget will be added to your website. (You can add as many as you want).

![](/files/-LBqRlDK_psPV8ZtpgMz)

#### Click anywhere inside SoundCloud widget section and then click on Edit raw .

![](/files/-LBqRtlioUSBn2X7O6YO)

#### Enter your own SoundCloud Track URL and check the item to show on your song.

![](/files/-LBqS1JZQvquQakkLVVn)

Click UPDATE button and your track will be added to your Website

You can adjust more setting like margins, height, width etc. from Setting tab

![](/files/-LBqS945AkMoqV1oBWsO)

To embed SoundCloud track with different look and with different functionalities, [Please read this article](https://help.vintcer.com/)


# Adding SoundCloud Tracks directly

Add SounCloud tracks to your website using embed codes.

Embed Soundcloud Tracks beautifully

![](/files/-LEW2YWYZjRsB1vinR7F)

1. Open the SoundCloud website and Track that you want to Embed and Click on Share button.

![](/files/-LEW0lvr3NDuEzwUvtDs)

2\. Now, click on Embed next to share button

![](/files/-LEW0szySizTihgv1g_k)

3\. Copy the Code and paste into your website. See the steps below-

4\. From element sections choose Raw Elements

![](/files/-LEW-Nn3g-Th7BHpxDOw)

![Click on Raw element and select Edit](/files/-LEW3u2IYhkdx7f3gIoA)

5\. Paste the code into editor and click save.

![](/files/-LEW5TyjMhXnYdH3Fu1b)

6\. You can customize background and other dimension too . Click on the settings button next to Settings.

![](/files/-LEW67VMzXrTM5DQwtt_)

You can also add tracks in sections too. please read this similar article explaining adding video in sections but works for SoundCloud too. <https://docs.vintcer.com/video-using-html-code.#using-raw-element-inside-a-section>


# Multi-language website

You can create Multi language website with Vintcer either using Google translate or hosting your Translated website on sub-domain

#### There are to ways to create Multi-language Website-   **1. By Using Google Translate widget.**   <http://help.vintcer.com/multi-language-website/how-to-add-google-translate-to-your-website-multi-language-website>

**2. Host your Translated website on sub-domain example**- [english.youdomain.com](http://en.youdomain.com/) or [russian.yourdomain.com](http://ru.yourdomain.com/) etc. Please see the procedure below to create this type of Multi-language website.

In order to serve your website in more than 1 language, please take the following steps:

1\) Create a new copy of your website by clicking 'Save a copy' (found next to the Publish button).

![](/files/-LBqScpGXcgFADjVCW3J)

2\) We suggest saving it a name that will make sense. For example 'Spanish version'.

3\) Translate the text to your desired language.

4\) Publish the website.

5\) Create a new CNAME record in your domain's registrar control panel. This will create a new subdomain that will host the new language version of your website, so name it something that makes sense. The value of the CNAME record should be '**verify.vintcer.com**'. Example of CNAME record settings:

Host/Name - es

Value - **verify.vintcer.com**

6\) Contact our support team at <team@vintcer.com> with these details:

* Your user name.
* The current version of your website (the one that you initially upgraded or paid for).
* The 'Editor URL' of your new language website (Just copy the URL from the address bar while in the editor - should look something similar to <https://www.vintcer.com/edit/vbid-6bb6f-evulbpycyb>)
* The name of the CNAME you created (the subdomain where you want your new language website to be)

7\) We will then set everything up for you on our end. There's no need for a second license.

8\) We suggest to add [Hreflang tag](https://support.google.com/webmasters/answer/189077?hl=en) to the header of each page. That will help Google understand that this certain page is a different version an already existing page, only in a different language. To keep things simple - it's just something that will do good for your SEO.


# Google Translate

Learn how  to add Google Translate to your website (Multi-language website).

To add Google translate to your entire  website you need to add following code in Site header.

1. Click on Setting and then choose Pro settings.

![](/files/-LBqT1H2c2NslHGtfsLx)

2\. Copy the Below Code-

```markup
<body>
<div id="google_translate_element" style="text-align: center;">
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
```

**3.** Copy and Paste the above code into PRO setting or Site Header.

![](/files/-LBqTNZReA1IUxFdf0BW)

Click on Save button, make sure to Publish the changes.

**Note:- You can align the Google translate button to Right, Left and Center**

### To align the Translate button in center. Paste this code-

```markup
<body>
<div id="google_translate_element" style="text-align: center;">
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
```

If you want Translate button in right side.

```markup
<body>
<div id="google_translate_element" style="text-align: right;">
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
```

If you want Translate button in left side.

```markup
<body>
<div id="google_translate_element" style="text-align: left;">
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
```


# Sitemap (SEO)

Sitemaps are used by search engines like Google and Bing to quickly scan your website for content.

All Vintcer websites automatically generate a sitemap.xml file that contains links to all your  pages, products, and blog posts. This is used by search engines like Google and Bing to quickly scan your webpages for content.&#x20;

You can submit your sitemap to Google Search Console to make sure that your site can be easily crawled and indexed by Google.

#### &#x20;The sitemap file is located at the root directory of your custom domain.

\
&#x20;For example: `www.yourdomain.com/sitemap.xml`


# SSL certificate

You can redirect your website from HTTP to HTTPS by installing a SSL cetificate. Read this article for more information

### 1. If you are using our [new DNS records for connecting the domain](https://docs.vintcer.com/connect-your-own-domain) to your website SSL will be issued to your domain automatically. Our new DNS records for connecting the domain is are given below -&#x20;

Make sure you have used the below mentioned records for connecting domain to your website.:

| **TYPE**     | HOST    | VALUE                   |
| ------------ | ------- | ----------------------- |
| **A RECORD** | **@**   | **34.96.116.138**       |
| **CNAME**    | **WWW** | **connect.vintcer.com** |

![](/files/-Lj0ut4UukaHlfMMA-ZD)

{% hint style="success" %}

### 2. After SSL installation follow the below steps to redirect website from HTTP to HTTPS automatically.

{% endhint %}

### 2. Log in to your account and open the website in the editor.

Click on the setting button

![](/files/-LBuUm1FPn94fulFgfsP)

Click on Pro setting button.

![](/files/-LBuUpRNXImsmx-7H2Jg)

## Now, copy the code given below-

```javascript
<script language="JavaScript"> 
if(window.location.protocol != 'https:') 
{ location.href = location.href.replace("http://", "https://"); } 
</script>
```

Paste the code int Pro setting (Site header)

![](/files/-LBuVZRJLguZRBGSF635)

After entering the above code, Click on save button and Publish your website.&#x20;

Contact us at <team@vintcer.com> for any assistance or help. You can also visit [here](https://www.vintcer.com) for Live chat support.

## What is SSL?

SSL (Secure Socket Layer) is the standard security technology for establishing an encrypted link between a web server and a browser. This secure link ensures that all data transferred remains private. It’s also called TLS (Transport Layer Security). Millions of websites use SSL encryption everyday to secure connections and keep their customer’s data safe from monitoring and tampering

## Why Use SSL?

Every website on the Internet should be served over HTTPS. Here’s why:

* **Performance**: Modern SSL can actually improve page load times.
* **Search Ranking Boost**: Search engines favor HTTPS websites.
* **Security**: Encrypting traffic with SSL ensures nobody can snoop on your users’ data.
* **Trust**: By displaying a green lock in the browser’s address bar, SSL increases visitor’s trust.


# Adding Video to your website.

We made very easy for you to Add Video on your website. just use our Video widget and enter the Video ID and Video will be added to your Website.

{% hint style="info" %}
This tutorial explain about Background Video. To add a Video other than Background, please read next article.
{% endhint %}

{% hint style="info" %}
Only Youtube and Vimeo are supported if you are using our built in Video widget. To add video from third party like Wistia, Dailymotion etc. Please read respected Article.
{% endhint %}

### To add a video:

### 1. Click anywhere inside a section and click on the + icon

![](/files/-LiXy4hNSb6O7IyHXVfM)

### 2. After clicking on + icon choose the Video option from available widget list <a href="#a-selection-of-elements-for-you-to-add-will-show-up-choose-the-one-with-the-video-icon" id="a-selection-of-elements-for-you-to-add-will-show-up-choose-the-one-with-the-video-icon"></a>

![](/files/-LiXyFwN641VDS00aIfP)

1. A default video will appear in the stripe.
2. To change the video, click on it and a then click on Edit Video button.

![](/files/-LiXyVl97i6PbiF05_uH)

### 3. A Video setting panel will appear after clicking on Edit video button. Choose the Video source (Youtube/Vimeo) and then Enter the Video ID and click on Save button.   <a href="#click-edit-video-and-paste-a-link-from-youtube-or-vimeo-into-the-box-make-sure-the-link-looks-like-t" id="click-edit-video-and-paste-a-link-from-youtube-or-vimeo-into-the-box-make-sure-the-link-looks-like-t"></a>

![](/files/-LiY4IGrqcaUGNB7xz15)

You can also set filters and change the opacity of Video background.&#x20;

### 4. How to Find Youtube Video-

It is very simple to find your YouTube video ID. First, go to the YouTube webpage. Look at the URL of that page, and at the end of it, you should see a combination of numbers and letters after an equal sign (=). This is the VIDEO ID you need to enter in your website or VIDEO panel setting.&#x20;

![](/files/-LiY665TaVfE-V5cmOga)

### 5. How to Find Vimeo youtube video-

1. To find your Video ID, go to the Vimeo page and find the video you want to put on your website.
2. Once it is loaded, look at the URL and look for the numbers that come after the slash (/).

![](/files/-LiY6nCuzt3-qJLnMuR3)

{% hint style="warning" %}
If you choose **Autoplay** (muted) option then your VIDEO will be muted by default as per Youtube/Google , Vimeo and Chrome  policy.

You can read more about Autoplay restrictions here- <https://developers.google.com/web/updates/2017/09/autoplay-policy-changes>
{% endhint %}

{% hint style="success" %}
You can also embed any third-party VIDEO other than Youtube and Vimeo using RAW code widget.
{% endhint %}


# Video in Blocks.

You can add a Video anywhere using Video element.

{% hint style="info" %}
The below tutorial is a basic way to explain the Video element. Remember you can use this method any where on your website on any section or block.

If you want to add Video into Background of blocks/website the please read the previous article&#x20;
{% endhint %}

### In this tutorial we will replace a Image with Video. The method for adding VIDEO is same on all sections/blocks.

#### 1. Click on the Image and then click on + icon (as shown in below image)

![](/files/-LiYAU5YcmL1bVQZr8xh)

#### 2. Choose Video element from the available option&#x20;

![](/files/-LiYAluTpGwM9COH7Fb8)

#### 3. A default video will be added to your section when you click on Video element. Click on the Video and choose Edit Video option

![](/files/-LiYBH3mKLCnk-vM9utv)

#### 4. A Video panel will appear, enter the Video ID and it will be added to your website.

![](/files/-LiYBTdv33SPGqI613W1)

You can also set filters and change the opacity of Video background.&#x20;

### 4. How to Find Youtube Video-

It is very simple to find your YouTube video ID. First, go to the YouTube webpage. Look at the URL of that page, and at the end of it, you should see a combination of numbers and letters after an equal sign (=). This is the VIDEO ID you need to enter in your website or VIDEO panel setting.&#x20;

![](/files/-LiY665TaVfE-V5cmOga)

### 5. How to Find Vimeo youtube video-

1. To find your Video ID, go to the Vimeo page and find the video you want to put on your website.
2. Once it is loaded, look at the URL and look for the numbers that come after the slash (/).

![](/files/-LiY6nCuzt3-qJLnMuR3)

{% hint style="warning" %}
If you choose **Autoplay** (muted) option then your VIDEO will be muted by default as per Youtube/Google , Vimeo and Chrome  policy.

You can read more about Autoplay restrictions here- <https://developers.google.com/web/updates/2017/09/autoplay-policy-changes>
{% endhint %}

{% hint style="success" %}
You can also embed any third-party VIDEO other than Youtube and Vimeo using RAW code widget.
{% endhint %}


# Video using HTML code.

You can add a video using Embed code instead of using our built in Video element.  Read this article to

{% hint style="info" %}
There are two way to embed Video using HTML code in your website.

1. Using direct RAW element

2. Using RAW element inside a Section
   {% endhint %}

3. To add a video using RAW element, choose RAW element from Menu option

Click on the large, blue colored plus icon to open available selections

![Click on the + button](/files/-LEOqzLuGcyty_XKiEuz)

Now choose RAW element from Elements

![Select 2. RAW ](/files/-LEPCXr4zoDp_ruOQXbQ)

![](/files/-LEPCq1VdV9FQCaflayJ)

Click on RAW element and choose EDIT raw

![](/files/-LEPCyhOP3H6fUwsysxz)

Paste your code into Code window and click SAVE.  To change background and other properties choose settings next to Code.

![](/files/-LEPD0fX24sgRZCPoKsj)

Publish your website to see the live changes on your website.

## Using RAW element inside a section

![](/files/-LEPG_JhYq-UfHGa7b6n)

You can also embed a video inside any blocks/section using RAW element.

Add a section/block. For example lets add a video using embed codes (other then Youtube or Vimeo) inside header

Add a block

![](/files/-LEPEcgvYlmTQD4deXpF)

Set the opacity on full before adding Video code.&#x20;

![](/files/-LEPEeZyVPYUG3f5W8ao)

2\. Remove the default background Image by clicking on remove image button (Please remove the image after selecting the opacity)

![](/files/-LEPH2OvrkzsCkDhU_Jr)

![Choose the Last option (<>) for adding RAW element](/files/-LEPHf1kOicqJLyV-use)

Add RAW element after removing the background.&#x20;

After adding RAW element, remove the default code and paste your video code into it. That's it.

You can remove the Title and button by clicking on them and then select Remove element.

![](/files/-LEPHxUKgErr0qcu3PrH)


# Wistia Video

Wistia provides simple software for creating, managing, and sharing videos for business. You can add Wistia videos to your website very easily.

Login into your Wistia Account- <https://secure.wistia.com/login>

Open the Video that you want to add into your Website.

Click on the Video Action and choose Embed & Share.

![](/files/-LBultXQGLEfUzrEtQvx)

Now, copy the Video Embed code using Copy Button

![](/files/-LBum8HpFjlyrNbP5TuO)

Here is a Example Embed code:-

```markup
<script src="https://fast.wistia.com/embed/medias/r65t3l8mgb.jsonp" async></script>
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
<div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;">
<div class="wistia_embed wistia_async_r65t3l8mgb videoFoam=true" style="height:100%;position:relative;width:100%">
<div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;">
<img src="https://fast.wistia.com/embed/medias/r65t3l8mgb/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" onload="this.parentNode.style.opacity=1;" />
</div></div></div></div>
```

After copying the Embed code, Go back to your website editor and Add a RAW element by adding section first. (Click on the blue colored + button to add a section).

![](/files/-LBuk9MEe27aPD27srZS)

Now, choose RAW element.

![](/files/-LBukdLSkvy23UxWxGVe)

Click on the Raw element to open the code editor. (Don't worry, you don't need any programming skills 😃)

![](/files/-LBukrE89CYUhG0zd1He)

Click on Edit RAW

![](/files/-LBulAwMoHtFTKhX2i2q)

Paste the Embed code into the Code editor and click save.

![](/files/-LBumqXhA-4ShUkUEqyw)

That's it. Publish your website and Video will be available on your website.&#x20;

You can customize Background and embed size etc from Settings.

![](/files/-LBunLkOZiKsxKIS9mTb)


# Intercom Integration

Learn how to add Intercom messenger to your website.

First, enter your email address on [the Intercom homepage](http://www.intercom.io/) and create your account. <br>

![](/files/-LBvFsGuUhAZFWv5LjOs)

Next, start your free trial. <br>

![](/files/-LBvFwrKw_novuk2njW1)

### Install the JavaScript code. <a href="#install-the-javascript-code" id="install-the-javascript-code"></a>

Copy the Intercom installation code from  Intercom Dashboard. Example of sample code is given below-

```javascript
<script>
  var APP_ID = "APP_ID";

 window.intercomSettings = {
    app_id: APP_ID
  };
</script>
<script>(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',intercomSettings);}else{var d=document;var i=function(){i.c(arguments)};i.q=[];i.c=function(args){i.q.push(args)};w.Intercom=i;function l(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/APP_ID';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);}if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})()</script>
```

In your Vintcer Dashboard, Click on the settings and open the Pro settings-

![](/files/-LBvGEYwxJQ1ZkHbYdlB)

Paste the code inside Site header. (See the image Below)

![](/files/-LBvGXNdxfLJcUZbVp1E)

Click on save button and make sure to click on Publish button.

Contact us if you need any assistance or help with installation.


# Add Feedback form

Learn how to add a Feedback Form to your website to collect  feedbacks from your Users.

Open Site settings  and then choose Feedback form from Page Widgets.

![](/files/-LBvecAketngLqk9yqQv)

Click on the FedBack and the click on  Customize button.

![](/files/-LBz5Q4eOoZWiRE8nUZG)

Now add your Email address on which you want to receive the notifications when someone provides you feedback.

Fill other column as per your requirements. Click on **UPDATE** button once done.

![](/files/-LBz5XNLeE9WjKYcQhqj)

Click on **PUBLISH** button to save the changes on your Live site.


# Calendly- Schedules Meetings

Schedules Meetings with Others Based on Your Availability with Calendly.

Finding a time that’s good for everyone to hop on a call or participate in a meeting often turns into a bad game of email tag. [Calendly](https://calendly.com/) makes scheduling super simple, by coordinating your availability with others’.

Connect your Google Calendar to the site and Calendly will know when you have events marked as busy. Then you can share a link to your Calendly page and your invitees can schedule their own appointments with you, working around those busy/unavailable times. The invitees never have access to your dashboard showing all your appointments, but they can choose from various appointment types—15, 30, and 60 minute meeting intervals. You can add, delete, or customize these event types.

**You have two options to Add Calendly to your website**

1. Add a Calendly Link to a Button or text&#x20;
2. Embed your Calendly Page (see the description below)

### Embed options overview

There are three ways to embed Calendly on your site: **inline**, **popup widget** and **popup text**. All three options are completely responsive, so your invitees can schedule with you across any device. Click the thumbnail images below for a preview of each option.

1. [Inline](https://d33v4339jhl8k0.cloudfront.net/docs/assets/562690a8c69791452ed4d57c/images/56f406039033601eb6735e49/file-FP5UbcjmJ8.png)
2. [Popup widget ](https://d33v4339jhl8k0.cloudfront.net/docs/assets/562690a8c69791452ed4d57c/images/56f40598c6979115a34091ec/file-lAXS9st5vY.png)
3. [Popup text ](https://d33v4339jhl8k0.cloudfront.net/docs/assets/562690a8c69791452ed4d57c/images/56f405f2c6979115a34091f1/file-FP7ldLroYp.png)

**How to get your embed code from Calendly**

You can embed your main Calendly page, or a specific event type.&#x20;

To embed your main Calendly page, visit your dashboard and select "Share Your Link" from the dropdown menu.

![](/files/-LBz0kcQ9FqrT38_mY3B)

In the popup window that appears, select "Embed on Your Website."

![](/files/-LBz0nyL0sD7NU_V_BOf)

To embed a specific event type, navigate to your Event Types page, click the gear icon, and select "Embed."

![](/files/-LBz0sXQikxBrQlzrNqc)

After making any desired changes to your widget color/text, select "Copy Code."

Once you've copied your embed code, head to your website to begin embedding!

\
Choose Raw element from element section-

Click on Large Blue + button to open element section<br>

![](/files/-LBz0wwExgCgclGs-9vR)

Now, Choose RAW element

![](/files/-LBz10vfkVQdNFXOAjTe)

After adding the RAW element, Click on the Edit Raw button

![](/files/-LBz1Mfg6QFAJUg-uanv)

Paste the code into code editor and click save. Publish your website to Make the changes Live.


# How to add and configure built in Contact Forms

Learn how to add and configure built in forms in your website.

## Add a form in your website by clicking on add a New Section Button (Large Blue colored + icon)

![](/files/-LEx2pgBWcwGrnVWF1mw)

### 2. Select the Design of Forms from available designs

![](/files/-LExAWY_NkGbTXAabi0u)

### 3. To receive the submitted forms on your email and display a Thank You message on submission, follow the below mentioned steps-

a. Click on the form and choose - Form settings

![Click on 3 dots and then choose Forms settings](/files/-LgrHm46xBxDdJ7hw1Ze)

![Click on the form settings buttons](/files/-LgrHpbfZt4NpQRLCTAG)

## 4. Add your Email and Thank you message and click SAVE

![](/files/-LEx5bIG8y_IWaas3ghj)

### 5. Click on the Publish button to save the changes on your Live website.

## How to add more fields in forms?

### 1. Click on the any form field and then click on + icon&#x20;

![](/files/-Li_TzXV4G3u4kCjUxaz)

### 2. Now choose Field from element list&#x20;

![](/files/-Li_UFd2bbH_9Ktn2M0h)

### 3. A field will be added to your Form, you can click on that Field for further customization.&#x20;

### Click on the Field and then choose Edit Field.&#x20;

![](/files/-Li_ULOqIg0O6R-Xtv1C)

### 4.  You can change the Field option from Name to message, phone, date or even multiple options. Click on Save button after making the changes and then click on the pUblish button to make the change live on your website.&#x20;

![](/files/-Li_Ufvi0vEhk9fRmBdf)


# Install Disqus comments on your website

Why choose Disqus?

* Easy to install
* Built in powerful Analytics and SPAM control
* Built-in Monetization methods  (<https://disqus.com/features/monetize/>)
* Most popular comment plugin in industry

1. Signup at [https://disqus.com/admin/create](https://disqus.com/admin/create/)
2. Choose - I want to install Disqus on my site (see the below image)

![Choose- I want to install Disqus on my site](/files/-LGe7VocRBFntTGT4_dM)

3\. Now, choose the website name and website category

![](/files/-LGe8QS8FsjgXObOqLbt)

4\. Click on Create Site button

5\. Click - I don't see my platform listed, install manually with Universal code.

![](/files/-LGe9TKRBE12B4qXs2G6)

6\. Copy the Given Code (see the below image).&#x20;

![](/files/-LGe9CvR5Pg72FyQcka4)

7\. Go back to your Vintcer Editor and past the Code using RAW element

7 (a)- Click on the blue colored Plus button to add RAW element

![](/files/-LGeAlhVu9ZeLgobosHf)

7 (b)- Now choose RAW element form widget

![](/files/-LGeBN9sEw2FR_ymYLzQ)

7 (c)- After adding RAW element click on Edit Raw  and paste the code into Editor

![](/files/-LGeBTWvW3XFYUs3_Weh)

7 (d)- Paste the code and click Save&#x20;

{% hint style="info" %}
Make sure to add a \<br> tag at the end of code you add into your website.&#x20;
{% endhint %}

![](/files/-LGeCKnT8qM0dF_jCmHo)

8\. Go back to Disqus Dashboard and click configure and complete the remaining steps. Thats' all, you are all set to start using Disqus.&#x20;

![](/files/-LGeD-9zDygcC97R1Gck)

9\. You need to follow the above steps only once, next time only keep the Disqus code and add it to your website using RAW element  where you'd like  you want to Disqus ot load.


# Adding Google Maps to your website

Learn how to add Google Maps in your website in few minutes with different designs and layouts.

### 1. Click on Blue colored + icon to add a New Section

![](/files/-LKbgUlEYyQeLHkUTTbs)

### 2. Select Map from section menu

![](/files/-LKbgfI5usiQCtH0nn1K)

### 3. Choose a Map style from available designs<br>

![](/files/-LKbgl5mJ58ZARd9G-bV)

### 4. Click on the Map of your choice and it will be added to your website.

### 5. Click on the Map to to edit location

![](/files/-Li_WBFmpk8xDzJQGTSl)

### 6. Enter your business or personal address in Address bar and click on Save button. Make sure to click on the Publish button after making the changes. &#x20;

![](/files/-Li_WMwLB7TafENUeAI4)

After entering the address click on Save button and your location will be updated on the Map.

{% hint style="success" %}
Click on the Publish button to Save changes.
{% endhint %}


# Upload files to AWS S3 and use them in your website

Learn, How to create AWS S3 account, upload files and use them into your website.

{% hint style="warning" %}
As part of the [AWS Free Usage Tier](https://aws.amazon.com/free/), you can get started with Amazon S3 for free. Upon sign-up, new AWS customers receive 5 GB of Amazon S3 storage in the Standard Storage class, 20,000 Get Requests, 2,000 Put Requests, and 15 GB of data transfer out each month for one year. If you use some other AWS services or exceed the Free Usage tier, Amazon may charge your linked credit card/Back account, Vintcer isn't responsible for such charges.
{% endhint %}

1. Create a account on AWS by following the link- <https://portal.aws.amazon.com/billing/signup#/start>
2. Enter your account details and Billing information in next steps. &#x20;

![](/files/-LKkdwJXCp5WZ7cybiWd)

3\. After Sin up, Log in into your AWS account and Choose the Simple storage service (**S3**) from Services list. (see the below image)

![](/files/-LKkf7IvGYA1VqqRAVMY)

4\. Now, create a Bucket in S3 dashboard by clicking on Create a Bucket button.

![](/files/-LKki9gXFF1QvrQULQ7j)

5\. Enter the Name of bucket (example- demoS3account) and click on Next button (see the below image)

![Enter bucket name and leave the other options as default.](/files/-LKkjHDAYfCzmiXuAdjA)

6\. Click Next button again

![Do not change the default settings unless needed. ](/files/-LKkjWFxQQFfVerbWAMV)

7\. Click next button

![You can make the bucket Public if required. ](/files/-LKkjfgJDvNTW55mf8Xg)

\
8\.  Finally, click on the create bucket option. Your Bucket will now appear in your AWS S3 Dashboard.

![](/files/-LKkjx15wBDA11deXKBo)

9\. Open you bucket by clicking on it.

![](/files/-LKkn9fng9F522TGt0gr)

10\. Click on Upload button (you can also create folders before uploading the files to bucket)

{% hint style="danger" %}
Make sure to choose Permission as Public while uploading the files to Bucket.  (see the Step no. 11)
{% endhint %}

![](/files/-LKknO_KBTeEPzb8P386)

11\. Upload the File, from **Manage public permissions -** choose **Grant public read access to this object(s)**

![](/files/-LKknzcX-eHeFFm79Jg_)

![Click on Next button](/files/-LKkoHYS6b1xx93_ZAuo)

12\. Click on Next button in Next window, leave the value defaults.

13\. That's it. Your File is Uploaded to AWS S3 server you can click on it to get the Link.

![](/files/-LKkoclRUcmBtSrTMQ9S)

{% hint style="info" %}
There is no need to create the buckets again and again, you can simply upload all the files to this bucket only.&#x20;
{% endhint %}


# Adding External links to buttons

Learn how to add or link a external file or URL to your website.

1. Click on the button and choose **Link To...**

![](/files/-L_XJIW55NqtXtui4Q3i)

2\. Now choose- **External Url**  option

![](/files/-L_XJM8rKlOt_9b6HsdT)

3\. Paste or type  the link into Link box.&#x20;

{% hint style="info" %}
Please use Paste command to paste the link. For Windows users- Ctrl + V

For Mac users- Command + V
{% endhint %}

![Paste the link and click SAVE](/files/-LKkrNSv8mPR_EnD7eqb)

4\. Paste the link and click on SAVE button. Publish the changes to see the changes on your live website.


# PayPal Donations

Add PayPal donation button to your website in few clicks.

1. Add a Stripe of your choice.&#x20;

![](/files/-LLbi-JJatBCYEjC7dsW)

2\. After adding the Stripe of your choice, click on element and then click on + button to add a new element&#x20;

![](/files/-L_XKDvRrJklpNKeBSCk)

3\. Select Widget after clicking on + button

![](/files/-LLbjBYdegHxuypVEDmw)

4\. Now, Select PayPal from available widget

![](/files/-LLbjjslcFDiyfWvLcx4)

5\. Add you registered PayPal email, Your Business Name, Default currency and Amount (In case you want to accept fixed amount) leave blank if you want to users to enter the Donation Amount.

![Click on UPDATE button after adding the required information.](/files/-LLbkfn_GNOoWr-dIYT7)

6\. Make sure to click on UPDATE button to save the changes.&#x20;

![](/files/-LLbl32fd88zsomTmlWG)

7\. You have now added the Donation button, your users can now Donate the money to you.&#x20;

You can use the above method on any sections, blocks or stripes.&#x20;


# Countdown Timer

Learn to add a beautiful countdown timer perfect for coming soon websites and pages,  flash sales, event pages, special promotions, birthdays, weddings, and more.

{% hint style="warning" %}
This article explains about built in countdown timer, if you want to use third-party countdown timer please read this article- <https://docs.vintcer.com/custom-html-js-code>
{% endhint %}

{% hint style="info" %}
This Countdown widget can be added to any blocks with different layout and alignment, feel free to experiment by click on Section or[ Pro setting](https://docs.vintcer.com/pro-settings) (gear icon available at right corner of each section)
{% endhint %}

![](/files/-L_XLhK85nIIzAEjuvdO)

### Click on any element and then click on + button&#x20;

![](/files/-L_XLmHSnY-VAl0fSJBM)

2\. Now, add a Widget by clicking on element button.

![Choose Widget <> from the element list (last option) ](/files/-LMStsNarOKFR-nBWNGi)

3\. Choose Countdown timer from the available options

![Choose Countdown from list](/files/-LMSvSs_s4tcugnYhn3t)

4\. After adding Countdown widget to your website, set the Date and time and change the color of countdown clock by clicking on Background and Text respectively and click on Update Button.

![](/files/-LMSw8wEN8YoigFAR8uI)

{% hint style="success" %}
Make sure to click on UPDATE button after changing date, time and color. Publish your website by clicking on Publish button to see the changes on live website.
{% endhint %}


# Add Twitter Feed to your website

Add twitter feed to your website with few click. Our Twitter feed widget makes it easier than ever to add your twitter feed to your websites.

{% hint style="info" %}
This Twitter widget can be added to any blocks with different layout and alignment, feel free to experiment by click on Section and [pro setting](https://docs.vintcer.com/pro-settings) (gear icon available at right corner of each section)
{% endhint %}

{% hint style="warning" %}
This article explains about built in Twitter Feed, if you want to use third-party countdown timer please read this article- <https://docs.vintcer.com/custom-html-js-code>
{% endhint %}

![](/files/-LMT1R7lOtjiFE335p1i)

1. Add a section of your choice and click on small + button to add a widget.

![](/files/-LMT5qqGCxqK_k2dwl5T)

2\. Now, choose Widget <> from element tray

![](/files/-LMT5z9DnJ1kGBVDJhYv)

3\. Enter your twitter username in Twitter Username field and click on UPDATE button

![](/files/-LMT6R0xyKOqQqYCl8W8)

{% hint style="success" %}
Make sure to click on UPDATE button after adding your Twitter username in field. Publish your website by clicking on Publish button to make the changes live on your website.
{% endhint %}


# How to add a PDF into your website

Insert a PDF into your website with our built-in PDF widget.

{% hint style="warning" %}
This article explains about built in PDF widget, if you want to use third-party countdown timer please read this article- <https://docs.vintcer.com/custom-html-js-code>
{% endhint %}

{% hint style="info" %}
This PDF can be added to any blocks or sections with different layout and alignment, feel free to experiment by click on Section and [Pro setting ](https://docs.vintcer.com/pro-settings)(gear icon available at right corner of each section)
{% endhint %}

1. Open block Menu by clicking on Large + button (see the image below)

![](/files/-LMTEa-UymT-2EtAYwXI)

2\. Click on Widget (Left side) and then Choose PDF widget from available sections

![](/files/-LMTI9008yXEmjNwkD9r)

3\. After adding the PDF widget a default PDF file will appear, click on the PSD and then select Edit Widget

![](/files/-LMTL-TZTDjJ9KUzco9G)

4\. you can upload your PDF file to any public cloud like Google drive, Google docs, [Amazon S3](https://docs.vintcer.com/upload-files-to-aws-s3-and-use-them-in-your-website) etc. and get the link to your PDF file.

Enter the Link to PDF file in File URL column and Click on UPDATE button

![](/files/-LMTKxKYS-MUxhR4_niN)

{% hint style="success" %}
Make sure to click on UPDATE button after adding your Twitter username in field. Publish your website by clicking on Publish button to make the changes live on your website.
{% endhint %}


# Pro settings

Pro setting is the powerful way to control content width, settings, padding etc. You can also change section or block layout, alighment etc with Pro settings.

{% hint style="warning" %}
Each sections or blocks has it's own Pro settings. Click on the Section setting icon to open Pro setting (Gear icon available at right side of each section)
{% endhint %}

As written above each section has it's own setting so you may find some extra settings in some sections and less in other. (see the two images below for difference)

![](/files/-Li_YKWdB9TvUYloJWbG)

![While this section Doesn't has those Layout options as the above section doesn't require those.](/files/-Li_YcYa_fBwEkVh2Qjg)

![](/files/-Li_YmSVNC-hKYD4JOKA)

## You can adjust and fine tune alignment of text, images, and other content using pro setting.

For example Choosing Text Box spacing and adjusting the parameters we can align Title and Button in a same line

### Click on anywhere inside Block/section and then choose Section Settings

![](/files/-Li_XXO1KW3zyjWwZwBE)

{% hint style="info" %}
You can also use Alignment button for such alignment tasks. **See the image below** (we will cover more about such feature in Section setting page)
{% endhint %}

![](/files/-Li_Xe_oBKYRU3D69L3X)

{% hint style="success" %}
Feel free to contact us again here- <https://www.vintcer.com/support>

or chat with us using Live chat widget if you need any help.&#x20;
{% endhint %}


# Cookie Consent app

Cookie Consent is built-in plugin for alerting users about the use of cookies on your Vintcer website. It is designed to help you comply with the hideous EU Cookie Law.

{% hint style="info" %}
Cookie Consent is built-in plugin for alerting users about the use of cookies on your Vintcer website. It is designed to help you comply with the hideous EU Cookie Law. Read more about cookie Law here- <https://vintcer.blog/blog/the-eu-cookie-law-explained>
{% endhint %}

1. Open site Setting by clicking on Setting Button and then choose Page widgets (⚙️ Gear icon available at Left side)

![](/files/-LMTg4ghw1ZuyTemmotC)

2\. Click on cookie consent Button to add it to your website. A Cookie banner will be added to your website. You can customize the appearance by clicking on Customize button.&#x20;

![](/files/-LMTgOlCGCCx85iFyyuu)

3\. Adjust the Position, alignment, color etc from Setting and click on UPDATE button to update the settings.

![](/files/-LMTgll0TeN899K7of7C)

{% hint style="success" %}
Make sure to click on UPDATE button and then Publish button to save the changes on live site.
{% endhint %}

### How to remove Cookie Consent App from your website?

Open website setting by clicking on Setting button available at left side. From page widget click on Remove button below Cookie Consent

![Click on remove to remove Cookie Consent](/files/-LMTiBZ-gmj4s2MYJIeG)


# Cookie Consent

Install The most popular solution to the EU cookie law.

{% hint style="danger" %}
Please use our latest Cookie consent widget to configure Cookie Banner to your website. read previous article or  click here to learn more- <https://docs.vintcer.com/cookie-consent-app>
{% endhint %}

{% hint style="danger" %}
This article is archived and not up to date, nor updated, however you can still use the below method. It is recommended to use our latest widget for Cookie consent. Click here to learn more- <https://docs.vintcer.com/cookie-consent-app>
{% endhint %}

Visit and copy the cookie code from - <https://cookieconsent.insites.com/download/>

You can choose layout , message, color etc. from there.&#x20;

![](/files/-LC3aI3oGqMMwVWs-xjj)

Go, back to Vintcer editor and choose Pro setting from setting tab.

![](/files/-LC3af0BzL5Z84VSuT4C)

Paste the copied code into Pro setting (or site header)

![](/files/-LC3aqeMTfj0GIsV5WnI)

Click Save and Publish your website to Publish the changes.


# Add Google Reviews to your website

Google Reviews allow customers to publicly post a review in Google about their experience with a business and its service and products. You can display those Reviews to your website automatically.

{% hint style="info" %}
This article explains about built in Google Reviews widget, if you want to use third-party Review Widget please read this article- <https://docs.vintcer.com/custom-html-js-code>
{% endhint %}

{% hint style="warning" %}
You need Google Place ID to fetch your reviews. You can find your Place id from your Account or using this tool- <https://google-developers.appspot.com/maps/documentation/javascript/examples/full/places-placeid-finder>
{% endhint %}

1. Add a section or block of your choice where you want to add the Reviews on your website. Click on small blue colored + button to open element tray.

![Click on the small Plus button available at left side of the text](/files/-LMU4o4mqJz752c-bQxa)

2\. Select Widget<> from option

![](/files/-LMU58UU_MuWFoiv3rQx)

3\. Select Google Reviews widget from available options

![](/files/-LMU5Jf7kNbLq93dEDfF)

4\. Enter your Google Place ID  and Place Name to get the Reviews of your Place.

### [Click here to find your Place ID](https://google-developers.appspot.com/maps/documentation/javascript/examples/full/places-placeid-finder)

![](/files/-LMU5h9ZNQuBF2cDK2NY)

{% hint style="success" %}
Make sure to click on UPADTE button and then click on Publish button to make changes live on your website.
{% endhint %}


# Social Media Button

Add Social Media Button to your website, apply themes and adjust size and add them wherever you wants with few clicks.

{% hint style="info" %}
This article explains about adding Social media Button. **If you want to add Social Media Share button then please read next Article or** [**click here**](https://docs.vintcer.com/social-media-share-button)**.**
{% endhint %}

{% hint style="warning" %}
This article explains about built in Social Media button, if you want to use third-party social media button  please read this article- <https://docs.vintcer.com/custom-html-js-code>
{% endhint %}

{% hint style="info" %}
These buttons can be added to any blocks with different layout and alignment, feel free to experiment by click on Section and [pro setting](https://docs.vintcer.com/pro-settings).
{% endhint %}

1. Add a section or block of your choice where you want to add the Reviews on your website. Click on small blue colored + button to open element tray.

![Click on small + button (blue colored)](/files/-LMUAyBF3HVsnImF7cId)

2\. Click on the Green colored Social button (Green colored button with ⚙️ icon)

![Click on Social ](/files/-LMUB7FkemNrvYwHQI2z)

3\. After clicking on Social button a default Social media buttons will be added to your website. Click on Buttons and then choose Edit Social

![](/files/-LMUBVTSbZ5MWrZCQG5O)

4\. You can choose different button styles from many themes (see the image below)

![](/files/-LMUBtHQ5bTcAIQeru40)

5\. Adjust the Size of buttons as per your requirements

![](/files/-LMUC1RqqxqaJTMNTNRs)

6\. You can add more social Network button and re-arrange then as per your need (see the image below)

![](/files/-LMUCEkgcDTFKH24cU5e)

{% hint style="success" %}
Make sure to click on Publish button after making changes to save the changes.
{% endhint %}


# Social Media Share button

Let people share your content, website or business  on Social Media. Use our Built in Share button and configure them with few clicks.

{% hint style="warning" %}
This article explains about built in Social Media button, if you want to use third-party social media button  please read this article- <https://docs.vintcer.com/custom-html-js-code>
{% endhint %}

{% hint style="info" %}
**This article explains about adding Social media Share Button.** If you want to add Social Media button then please read previous Article or [click here](https://docs.vintcer.com/social-media-button).
{% endhint %}

1. Open site settings and open Page widget (Next to style >> Menu >> Scroll f/x >> Page Widgets)

![Click on setting Icon available at Left side](/files/-LMUDnuXbRUi6AJbDOWs)

2\. Click on Share widget Icon

![Click on Share and then click on Customize](/files/-LMUEYOXzO_L7jh6T-dZ)

3\. Choose the position, Social networks, counter setting etc from Media Widget setting.

![](/files/-LMUEiR30Xa4k7Og_lh6)

{% hint style="success" %}
Make sure to click on UPDATE button and then click on Publish button to make the changes live on your website.
{% endhint %}


# Facebook Like Button

Add Facebook Like and Share button to your website with our built-in integration.

{% hint style="info" %}
This FB like and share button can be added to any blocks or sections with different layout and alignment, feel free to experiment by click on Section and [Pro setting](https://docs.vintcer.com/pro-settings).
{% endhint %}

{% hint style="warning" %}
This article explains about built in Social Media button, if you want to use third-party social media button  please read this article- <https://docs.vintcer.com/custom-html-js-code>
{% endhint %}

{% hint style="info" %}
**This article explains about adding Facebook Like and Share Button.** If you want to add Social Media button and Social media Share buttons then please read previous Articles.
{% endhint %}

1. Add a Block or section of your choice and click on small blue colored + button to open element tray.&#x20;

![Click on the small + button](/files/-LMXGmitMS2pvOhGIS3J)

2\.  Now, choose Widget <> option (in dark blue color) to open the widget bar

![](/files/-LMXGx8N-WcfqUkm_A8G)

3\. From widget bar, select Facebook Like option

![](/files/-LMXIZ-6tpWuiOyyeIo-)

4\. Enter you Facebook Page URL and enable Share button (true/false) and Click on UPDATE button.

![](/files/-LMXIN34QCAHiCBQw_6M)

5\. A Like and Share button will be added to your website

![](/files/-LMXI0NGgF1yWo0vU945)

{% hint style="success" %}
Make sure to click on UPDATE button and then Publish button to save the changes on live site.
{% endhint %}


# Facebook comment plugin

Add Facebook comment plugin to your Articles, posts or any other sections using our built in FB comment plugin

{% hint style="warning" %}
This article explains about built in Facebook comment plugin, if you want to use third-party Plugins  please read this article- <https://docs.vintcer.com/custom-html-js-code>
{% endhint %}

{% hint style="info" %}
This Facebook comment plugin can be added to any blocks or sections with different layout and alignment, feel free to experiment by click on Section and [Pro setting](https://docs.vintcer.com/pro-settings).
{% endhint %}

1. Add a section or block of your choice. Click on small blue colored + button to open element tray.

![](/files/-LMXNP4zBK4X-W_SDM6Q)

2\. Now, choose Widget <> from element tray

![](/files/-LMXNV8y11nWSHOfy9I8)

3\. Choose Facebook comments from available widgets

![](/files/-LMXNavKPgyTcuPioZtr)

4\. Enter the required informations and click on UPDATE button

![](/files/-LMXNi8esmoaxiZ2ycN2)

{% hint style="success" %}
Make sure to click on UPDATE button and then Publish button to save the changes on live site.
{% endhint %}

{% hint style="info" %}
This Facebook comment plugin can be added to any blocks or sections with different layout and alignment, feel free to experiment by click on Section and [Pro setting](https://docs.vintcer.com/pro-settings).
{% endhint %}


# Facebook PIXEL

The Facebook pixel is an analytics tool that allows you to measure the effectiveness of your advertising by understanding the actions people take on your website.

## About Facebook Pixel

The Facebook pixel is an analytics tool that allows you to measure the effectiveness of your advertising by understanding the actions people take on your website. You can use pixel data to:

* Make sure your ads are being shown to the right people
* Build advertising audiences
* Unlock additional Facebook advertising tools

## BENEFITS

There are several ways you can use data collected from the Facebook pixel tracking to refine your Facebook advertising strategy.

With the Facebook pixel, you can:

* **Reach the right people**

  Find new customers, or people who have visited a specific page or taken a desired action on your website. Plus, create Lookalike Audiences to reach more people who are similar to your best customers. [Learn more.](https://www.facebook.com/business/help/666509013483225?helpref=faq_content)
* **Drive more sales**

  Set up automatic bidding to target people who are more likely to take an action you care about, like making a purchase. See how to [optimize your ad sets for conversions](https://www.facebook.com/business/help/1082085278508457?helpref=faq_content).
* **Measure the results of your ads**

  Understand how successful your ad is by seeing what happened as a direct result. You can view information like your conversions and sales. Find out what [data you can see from your Facebook pixel page.](https://www.facebook.com/business/help/898185560232180?helpref=faq_content)

## How to install FB PIXEL to your website?

#### **Step 1: Create your pixel**

1\. From your Facebook Ads Manager, click the hamburger icon (≡) and choose **Pixels**.

![](https://blog-assets.hootsuite.com/wp-content/uploads/2017/04/facebook-pixel01.png)

2\. Click **Create a Pixel**.

![](https://blog-assets.hootsuite.com/wp-content/uploads/2017/04/facebook-pixel02-620x267.png)

3\. Name your pixel, accept the terms, and click **Next**. When choosing the pixel’s name, keep in mind that you only get one pixel for each ad account, so the name should represent your business, rather than a specific campaign.

![](/files/-LMXd6XcfvOC0Hg9JDyn)

#### **Step 2: Add the pixel code to your website**

1. Open SEO/Analytics setup  (see the image below)

![](/files/-LMXd_v_3TC1I2iaQhSr)

2\. Enter the Pixel ID in Pixel column and Click SET

![](/files/-LMXdnp_-j7YM8UjzqkC)

{% hint style="success" %}
Make sure to click on **Set** button.
{% endhint %}

{% hint style="success" %}
Make sure to click on Publish button to make the changes Live on your website.
{% endhint %}


# How to activate license

1. Click on the Publish button (Publish button is available at the upper corner of website Builder).

![](/files/-LQJCPJpmat3tTBSSKDv)

2\. Got a coupon? Click here.

![](/files/-LQJCfkGQnqw0sSuJjEX)

4\. Enter the License code. ( License codes are generated during the purchase, you can also check your email for the License code)&#x20;

5\. You can connect the domain now.


# Website Transfer to Client's Account

{% hint style="warning" %}
Usually a Website is transferred to your client's account instantly but most of the time a website is reviewed before transfer so it can take around 6 to 8 hours to complete your request.&#x20;
{% endhint %}

{% hint style="info" %}
You can also request our Live chat representative for a website transfer.&#x20;
{% endhint %}

You can transfer a website to your clients account  by sending an email from your registered email address to [**transfer@vintcer.com**](mailto:transfer@vintcer.com)

Please include the following details while sending the email-

Your username-

Website name and editor URL of the website&#x20;

{% hint style="info" %}
Editor URL can be the link that is appearing in your browser while editing your website or free URL generated by clicking on the publish button
{% endhint %}

Your client's username-

Your client's registered email address-&#x20;


# Page Manager

Learn how to manage, copy and delete pages.

Open Page manager from top bar and click on Manage Pages button

![](/files/-LbhPKHJkn37enbaARHD)

![](/files/-LbhQ9O15XIob6KTPTky)

Hover over a page to see the available option, you can clone/copy, delete and move a page&#x20;

![](/files/-LbhQXghqWBfT5H49Liz)

## How to remove a Page?

Click on the Red  **X**  button  (next to copy button) to remove or delete a page.&#x20;

## How to clone a page?

Click on the copy/clone icon (white color icon before red colored X icon) to clone a page.&#x20;


# Responsiveness and Device Preview

The purpose of responsive design is to have one site, but with different elements that respond differently when viewed on devices of different sizes.

Responsive Web Design is automatic resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones).<br>

Vintcer automatically resize your website as per device or screen size. You can preview how your website appears on Mobile and tablets directly from website builder.

### From top bar click on Preview button (Near Publish button )

![](/files/-Lbh_NMvsZxb_UPLVQEX)

### Now, click on Mobile or Tablet option to see how it appears on respected device.&#x20;

![](/files/-Lbha42rj8s1Xs7B2Ovw)


# Adding Password Protection to Pages in your Website

You can add Password protection to your website's pages. In this tutorial you'll learn adding Password to your pages.

### 1. Open the Site settings from Top Bar

![](/files/-LiYD6WLdqLvyc1OOzSK)

### 2. From setting panel click on the Access, select the Password Protected option and enter your Password and click on SET button

![](/files/-LiYDGzsxf09ltToPfke)

### 3. After adding the Password make sure to click on the PUBLISH/UPDATE live site button (available on Top Right corner) to make the changes live on your website.&#x20;

![](/files/-LiYDqOIu3fVFKeTk8bQ)

{% hint style="success" %}
Feel free to contact us here- <https://www.vintcer.com/support>

Or chat us with via live chat widget if you need any help.&#x20;
{% endhint %}


# Instagram feed in your website using POWR Instagram plugin

### Register for free POWR account here- <https://www.powr.io/plugins/instagram-feed>

### Click on Add instagram Feed to Site button

![](/files/-Lih842w0LIm9hqYmS0Z)

### Choose HTML in next option

![](/files/-LieYnu0IKV53U1TEWtD)

### Click on *Add Feed button* available on left side of POWR dashboard and add you instagram username like (@username) and choose the layout and design etc.

![](/files/-Lih99Cw4a2xdy4-laNB)

### After making the changes click on Add to Site button to generate the embed codes&#x20;

![](/files/-Lih9plQ_LbwsZlG1ozl)

### Copy the generated codes

![](/files/-Lieash5OaCfNivVh04J)

### Open the VINTCER editor and choose RAW widget (last option) from section menu (Instagram feed can be added to any section using Widget option too)

![](/files/-Lieb8JUIDiaP5qzF5oe)

### or

![](/files/-LihBCyk_LuacHPNbPil)

### A empty RAW widget will be added to your website

![](/files/-LiebDjP5B-4ShQ_cpHX)

### Click on RAW ELEMENT and then click on Edit Widget button

![](/files/-LiebGHxfkNF-NUL8mNR)

### Paste the POWR code in to code editor and click on SAVE button. Thats it, POWR e-commerce plugin should be added to your website.&#x20;

![](/files/-LiebwIeHfPsQE6WAHOw)

{% hint style="success" %}
Make sure to click on Publish or Update live site button after making the changes to save and publish new changes.&#x20;
{% endhint %}

{% hint style="success" %}
Feel free to contact us via Live chat support or raise a ticket here-<https://www.vintcer.com/support> if you need any help.
{% endhint %}


# Google Tag Manager

**Google Tag Manager** is a free tool that allows you manage and deploy marketing **tags** (snippets of code or tracking pixels) on your website (or mobile app) without having to modify the code. ... Information from one data source (your website) is shared with another data source (Analytics) through **Google Tag Manager**

> **Introduction to Google Tag Manager-** [**https://moz.com/blog/an-introduction-to-google-tag-manager**](https://moz.com/blog/an-introduction-to-google-tag-manager)

### **Sign into Google Tag Manager account from here-** [**https://tagmanager.google.com**](https://tagmanager.google.com) **and click on Create Account button.**&#x20;

![](/files/-Li_5IElnRMNtmMVrIVc)

### Fill the required information, and choose Web (as platform) and click on create button.&#x20;

![](/files/-Li_5_JkCoMqraU9o0YA)

### Accept the Google Tag Manager Terms of Service Agreement, Tick the Accept checkbox at bottom and then click on Yes button on top

![](/files/-Li_5rYg_b_WZ7Eyi2gD)

### After accepting the Agreement, Tag Manager gives you installation code that you need to paste in your VINTCER website.&#x20;

{% hint style="info" %}
You only need the code that needs to be added in \</head> of your website. Copy the header code (shown inside red circle in below image)
{% endhint %}

![](/files/-Li_7HLGDOik95tL-zS8)

### Open your VINTCER  dashboard, from top bar click on setting and then choose Pro Settings

![](/files/-Li_8OXVXYKFkOEKyhNP)

### Paste the code inside Site header code and click on Save button

![](/files/-Li_GKzB4Kh69NKt0QOv)

{% hint style="success" %}
Thats it. Make sure to click on Publish button click Publish button after making the changes.&#x20;
{% endhint %}

You can read more about Tag manager on Internet or here -<https://www.orbitmedia.com/blog/what-is-google-tag-manager-and-why-use-it/>


# Referral Program

Understand basics of our referral program

## What is referral ID?

Referral ID is used by us internally for tracking the transactions, payments methods, sales made by you  etc

## What is referral code?

Referral code is a unique code given to you when you join our referral program. You need to share this code with your users through unique links when your user/referral/friends open that link they will get a coupon/referral code and can get discount of up to 20% on our plans. Once they purchase a plan, we will send your commission to your account.

We provide free creatives and promotional materials that you can use with your referral links and referral codes so you can market them easily. You'll get the promotional material download link once you join the program.

### How do I track and see my earning reports?

You can see your earning reports and sales here- <https://referral.vintcer.com/>

### How much commission will I get?

We share between 30% to 80% of profits in commission.&#x20;

### What is Sigma commission? (coming soon)

We have partnered with a web design agency. Where we provide custom design solution. You'll get up to $499 to $1500 per referral.&#x20;

###


# Add Live chat widget tawk.to to your website

{% embed url="<https://www.youtube.com/watch?v=WHVVzPRHcQs>" %}

#### Click on settings and then choose site settings, now from the Site settings panel, choose the page widget options, here you'll find the Chat widget, click on Chat option and then click on Customize button.

#### Now login into your tawk dashboard, click on Admin settings and choose Property settings from administration dashboard.

#### Copy the Site ID and paste it into you VINTCER chat widget parameter and click on the UPDATE button. Make sure to click on the publish button after making the changes.

You can see the widget has been added to your website, for changing its color, size and images make the required changes in tawk dashboard.


# Video pop-up (Lightbox)

1. From top bar click on settings and Choose Pro settings-

![](/files/-M0dKuy2KpYccztlIxrw)

2\.  Copy and paste below code in your website

```
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

```

![](/files/-M0dQEbsalf5DZLwaxoT)

Click on Save button

## Now add a HTML button to your website

![](/files/-M0dNUpvBorCQ8q3YCEY)

{% hint style="info" %}
Now copy the below code, and make sure to replace youtube link with your video link.
{% endhint %}

```
<a data-fancybox href="https://www.youtube.com/watch?v=_sI_Ps7JSEk" class="youtubebtn">
    Play Video
</a>
```

Remove the code from previously added widget and paste the above code and click on save button

![](/files/-M0dNupF-o4Hqs4YzTDI)


# Ecommerce - Sell products on your website

{% hint style="success" %}
There are many ways to sell products on your website, like using our built in e-commerce widget, PayPal links and embed buttons etc. You can also use any third-party e-commerce widgets on your websites for selling on your website.&#x20;
{% endhint %}

{% hint style="success" %}
You can Integrate [Stripe.com](https://stripe.com) account to receive money directly to your Stripe account and then to your Bank account. **We do not charge any commission on sales made by you. All your money is yours ad there is no hidden cost or fees.**&#x20;
{% endhint %}

### Click on + icon/button to open the Section manager&#x20;

![](/files/-LidqJn4D1kYn6LTta6W)

### Choose Store from section manager and select a design/layout for your products

![](/files/-LidqbvuRjsDucR8jBIf)

### After clicking on the section, few default products will be added to your website. You can edit the images, texts and button design.&#x20;

![](/files/-LidqyjjqdShqMQ6KsDs)

### Click on a Product and the click on the **(edit)** next to the Test Buy button

![](/files/-LidrhUiiXDso6Cvq8el)

### When you click on edit button a E-commerce Panel will appear, you can also change the product price, Name and then click on SET button. &#x20;

![](/files/-LidrwVmVK6247Mzdsja)

### Click on Dashboard button to open E-commerce dashboard

![](/files/-LidtL371ox9B6R-EOrW)

### You can see the summary of your store from here like your total earnings, orders, communication emails etc. You also need to Integrate your <https://stripe.com> account to receive payments directly to your Stripe account. &#x20;

![](/files/-LiduChjN_hOLpFooMLX)

### A step by step guide is available for Integrating Stripe is available here- <https://docs.vintcer.com/stripe-integration> or read next article.&#x20;


# Stripe Integration

Connect your Stripe account to your website to accept payments easily.

You can connect your [Stripe.com](http://stripe.com/) account to your Vintcer website to accept payments. To do so, start by creating the account on the following page - <https://dashboard.stripe.com/register>.

1\. Add a Store section

![](/files/-LfGEHPDExD_bZ9dJdJg)

2\. After adding the Store section, open the dashboard by clicking on section setting&#x20;

![click anywhere and then choose section settings](/files/-LfGEXTaI3f6_pEGHlcl)

3\. Now click on the Dashboard button&#x20;

![](/files/-LfGEh_KZWINx1E8Hgun)

4\. Click on the Transfer button in the store setting.

![](/files/-LfGEvt-kP5n_1dl5lic)

5\. Click on Setup button and add your Stripe credentials

![](/files/-LfGEqlgZ805wbhWM5RG)

Click on setup button.

Enter Stripe SK and Stripe PK.\
\
SK stands for "secret key", and PK stands for "publishable key".\
Secret and publishable keys are used to identify your Stripe account. You can grab the test and live API keys from <https://dashboard.stripe.com/account/apikeys>

You can first test the transaction by entering Test API key. After testing the test transaction replace the test API keys with Live Keys.

![](/files/-LBuK0f1GlqpAP9gQNbG)

Click on save button and you are all set to receive payments.\
You can test the transaction in test mode

**IMPORTANT**-  Choose the product type from e commerce dashboard to enable or disable shipping address details.

![](/files/-LBuK7IFq5u5KBTQRU-2)

![](/files/-LBuK9-r_MZ0_yGZjib0)

Use the below test card for making test transactions. Use any future dates as expiry date ( MM/YY) and any random number for CVC. \
\
You can find more cards and details here- <https://stripe.com/docs/testing>

| Brand                 | Card Number           | CVC            |
| --------------------- | --------------------- | -------------- |
| Visa                  | `4242 4242 4242 4242` | Use any Number |
| Visa (Debit)          | `4000 0566 5566 5556` | Use any Number |
| Mastercard            | `5555 5555 5555 4444` | Use any Number |
| Mastercard (2-series) | `2223 0031 2200 3222` | Use any Number |
| Mastercard (debit)    | `5200 8282 8282 8210` | Use any Number |
| Mastercard (prepaid)  | `5105 1051 0510 5100` | Use any Number |
| American Express      | `3782 8224 6310 005`  | Use any Number |
| American Express      | `3714 4963 539 8431`  | Use any Number |
| Discover              | `6011 1111 1111 1117` |                |
| Discover              | `6011 0009 9013 9424` |                |
| Diners Club           | `3056 9309 025 904`   |                |
| Diners Club           | `3852 0000 0232 37`   |                |
| JCB                   | `3566 0020 2036 0505` |                |
| UnionPay              | `6200 0000 0000 0005` |                |


# PayPal - Sell products using PayPal embed buttons

{% hint style="info" %}
In case if you don't want to use our built in e-commerce system and Stripe Integration for accepting payment you can also use third-party e-commerce widgets or PayPal embed button for accepting payments or selling products.&#x20;

For selling products using PayPal payment links please read previous article or click here. &#x20;
{% endhint %}

### Firstly, you need to Login into your PayPal account and then from Tools select button or click on All tools button

![](/files/-LieBE7udG4bnJGIaMHe)

The above options can differ in your account or country/region. Please check PayPal help center for creating PayPal button.&#x20;

### Choose the PayPal buttons option from Tools

![](/files/-LieCpvBf0-JzYiCRemo)

The above options can differ in your account or country/region. Please check PayPal help center for creating PayPal button.&#x20;

### Fill the required information like price, tax, item name etc.&#x20;

![](/files/-LieGwe29JDk52k8BKQv)

### You can also choose different types of buttons like Buy now, subscription and add to cart button

![](/files/-LieHOer_QJBehcBnQ_p)

### You can create a success/thank you or other custom page in your VINTCER website and then add it while creating the button, after successful payment PayPal will redirect your client to your website.

### Click on the Create Button after filling the required button

![](/files/-LieIO5iWW2TyNsrahUV)

### Copy the generated code and open your VINTCER editor

![](/files/-LieLNfpPhOO6yL5bPtG)

### Add any Section of your choice, you can choose from any section type, use something like Gallery section if you want to display lots of products together.&#x20;

![](/files/-LieLiBgGr-v9MK5ECik)

### Click on any element like text and then click on + icon/button

![](/files/-LieLzLx1Sl2WYeZ8mB7)

### Select the Widget element (last option- see the image below)

![](/files/-LieM7mXA70JL0m97WLx)

### Paste the PayPal button code that you have copied from the PayPal button generator,  inside the code section. Click on ***SAVE*** button.

![](/files/-LieMHIuZ4eyqp0vP74I)

### Thats it, PayPal button will be added to your website. If you want to connect built-in buttons to PayPal payment inks please read next step.&#x20;

![](/files/-LieMb5GqsOY-QaWptZE)

## You can also use the built-in editor buttons to link the Payment page. Click on any element and then select the Button element&#x20;

![](/files/-LieNFarg5sJRfID3M2H)

### A button will be added to that section, click on the button and then choose Link To... option

![](/files/-LieNJy2YuXBvDAMDmaS)

### Select External Url option

![](/files/-LieNV8X0PWoc0B1JAxu)

### From PayPal code generator, select Email option and copy the Link

![](/files/-LieNp4BYYCRsrUuxfJT)

### Paste the link into External Url option and click on SAVE button

![](/files/-LieNnaC2471jP3nSexC)

{% hint style="success" %}
Always click on Publish or Update live site button to make the changes live on your website.&#x20;
{% endhint %}

## TIP- If you want to list a lots of products then use Gallery like section

### After adding a Gallery Section, click on the image and then click on + icon/button

![](/files/-LiePJN3GCqCaLURqpGv)

### Now choose Widget option (blue colored last button as shown in below images)

![](/files/-LiePZb4QGLPAB5ZE6dC)

### Paste the button code into code editor and click on SAVE button

![](/files/-LiePxm9lI86Lax2o4mc)

{% hint style="success" %}
Always click on Publish or Update live site button to make the changes live on your website.&#x20;
{% endhint %}

{% hint style="warning" %}
Feel free to contact us via live chat if you need any help or raise a support ticket here- <https://www.vintcer.com/support>
{% endhint %}


# PayPal payments using payment links

Note:- You can directly embed PayPal and other Payment gateway button to your website alternatively you can add a Payment link to the buttons on your website.

### Open the PayPal button creation page

1. Log in to your PayPal Business or Premier account at [paypal.com](https://www.paypal.com/).Your PayPal account Summary page opens.
2. At the top of the page, select Tools, and then All Tools.
3. Scroll to PayPal buttons and click Open.The Make a PayPal Button page opens.Tip: To add PayPal buttons to your Tools menu, click the Payment buttons hearton the All Tools page.
4. Click Select button for the type of button you want to create.The Create PayPal payment button page opens and displays the button's configuration options.

### Enter payment details

1. In Item name, enter the name of the item or service that you want to sell.
2. (Optional) If you assign tracking numbers to your products or you want PayPal to track inventory levels, enter a unique inventory ID or tracking number in Item ID.
3. In the Price field, enter the price of the item or service. Leave blank if your product has different options and prices. See [Add product options and prices](https://developer.paypal.com/docs/classic/paypal-payments-standard/integration-guide/buy_now_step_1/#add-product-options-and-prices).
4. To change the default currency, click a currency from the Currency drop-down menu.The default currency is listed in your Profile, under My Money and PayPal balance.Note: If you're satisfied with your button, click Create Button to save your button and generate the HTML code. Then [copy and paste](https://developer.paypal.com/docs/classic/paypal-payments-standard/integration-guide/copy_paste_code/) the code to your web page.

### Add product options and prices

If your product has multiple options, like colors and sizes, add a drop-down menu to your button to list each option. You can list options with or without prices. To gather product customization information from a customer, add a text box to your button. For example, if you offer custom engraving, customers enter the message they want engraved in the text box.

1. To add up to 10 product options, click Add drop-down menu with price/option or Add options without prices.
2. Configure these options:Name of drop-down menuEnter a name that appears above the drop-down menu, as Size.Menu option nameEnter a name for the option, such as Small.PriceEnter the price for option, such as $10.00. This item is disable if you are adding options without prices.CurrencyA drop-down menu that shows the default currency. To change the currency, select a different currency in the drop-down menu.
3. Click Add another option, Remove option, or Done.
4. Preview the drop-down menu in Your customer's view.
5. To add up to two text fields where customers can enter information, click Add text field.

After creating Payment button, Click on Email option (as shown in below image).\
And copy the Link.

![](/files/-LVNOg_eBenRrBpF5MEQ)

After generating PayPal payment link, Go back to website editor and add a button or choose an element from element tab.&#x20;

Click on the button and choose Link to.

![](/files/-LVNOkLMvSj68M7Zu-4T)

Now choose External Url and enter PayPal payment link and click on Save button.\
After saving the button. Publish your website and now your customers can pay directly to you through PayPal.

Alternatively, you can also embed PayPal button directly to your website using Raw element

![](/files/-LVNOq0jJMKQMv350STQ)


# Use Razopay pay buttons on your website

Login in to your [Razorpay dashboard](https://dashboard.razorpay.com/app/dashboard) and select the Payment Button

![](/files/-MTm5ZIBID8LPCztD0qZ)

Click on the Create Payment button option from the right corner

![](/files/-MTm6obtw4Ykb4Kw4VNR)

Select any kind of button you need

![](/files/-MTm72ddwnwPAFrCB3qS)

Enter the Product amount, Title, and Amount and click on the Next button

![](/files/-MTm7qEyGmgvYeuSI1h6)

Click on the Create button

![](/files/-MTmALHYJEOJRLbxS431)

Now, copy the code. You can configure the redirect URL after successful payment from here.&#x20;

![](/files/-MTmAQIXJA7ItKNvoOx-)

{% hint style="info" %}
You can add the code to your VINTCER website in multiple ways, we will explain the two of them here.&#x20;
{% endhint %}

After adding a section (we have used the gallery section here), click on the title/subtitle and then click on the + icon to add a new element&#x20;

![](/files/-MTmGFePDm9axQPLJL1a)

Now choose the Widget (blue colored, last option)

![](/files/-MTmGtbQm0gj4h_-ZtQ2)

Enter the code that you have copied from the Razorpay and click on the Save button

{% hint style="danger" %}
Please ingore the warnings like- Payment Button is not added. Add Button script inside 'form' tag.&#x20;
{% endhint %}

![](/files/-MTmH58demg1k5AgMPlK)

After saving the code click on the publish button and you are all set to accept payments from your customer suing the Razorpay.


# POWR e-commerce plugin

Sell more products, downloads, or subscriptions instantly using POWR plugin. You can add POWR e-commerce plugin to your website with few clicks.

Sign up here- <https://www.powr.io/plugins/ecommerce> (POWR e-commerce comes with basic free plan, you can upgrade if required. )

### After signing up, click on Add Ecommerce to Site button&#x20;

![](/files/-LieYabT2IfowprEAZzx)

### In next step, choose HTML from the available options

![](/files/-LieYnu0IKV53U1TEWtD)

### Fill the required details like Payment options, product images and details, price etc.&#x20;

![](/files/-LieZdD44LhgfQClpKgU)

### After adding the products and configuring required setting generate the embed codes. (see the image below)

### Click on ***Add to Site*** button to generate the Embed codes

![](/files/-Liea_otJn6bLrEjigxS)

### Copy the generated codes

![](/files/-Lieash5OaCfNivVh04J)

### Open the VINTCER editor and choose RAW widget (last option) from section menu

![](/files/-Lieb8JUIDiaP5qzF5oe)

### A empty RAW widget will be added to your website

![](/files/-LiebDjP5B-4ShQ_cpHX)

### Click on RAW ELEMENT and then click on Edit Widget button

![](/files/-LiebGHxfkNF-NUL8mNR)

### Paste the POWR code in to code editor and click on SAVE button. Thats it, POWR e-commerce plugin should be added to your website.&#x20;

![](/files/-LiebwIeHfPsQE6WAHOw)

{% hint style="success" %}
Make sure to click on Publish or Update live site button after making the changes to save and publish new changes.&#x20;
{% endhint %}

{% hint style="warning" %}
Feel free to contact us via Live chat support or raise a ticket here-<https://www.vintcer.com/support> if you need any help.
{% endhint %}


# Business Email (Email for domain)

Learn how to setup inbox and email for your domain, with our free tools.

{% hint style="info" %}
Business email are completely free and you can get as many emails for your domain as you want.&#x20;
{% endhint %}

{% hint style="info" %}
When you register for the first for the time it can take up to 6-12 hours to process your request. As new accounts are manually reviews for SPAM and other issues. Once your account get activated you'll get the Login credential to start using mail box for your&#x20;
{% endhint %}

1. Visit-  <https://mailbox.vintcer.com/register-for--business-mail.html> and click on signup button
2. &#x20;In signup form add enter your vintcer username , email and email address that you want for your domain.

![](/files/-LHSrk3ZrK1wo5fOiAUw)

3\. Fill the required details an wait for the account activation email (It can take up to few hours to receive this email depending upon your account type and review.)

4\. When you receive activation email, you''ll get the domain verification credentials. You need to verify your domain to start using business emails. You need to add a CNAME and MX records as follows-

| Type  | Host                                   | Value             |
| ----- | -------------------------------------- | ----------------- |
| CNAME | See the Host value in activation email | email.vintcer.com |

After adding the CNAME record configure MX record as given below

| Type | Host/sub-domain | Data           | Priority |
| ---- | --------------- | -------------- | -------- |
| MX   | @               | mx.yandex.net. | 10       |

5\. Once your DNS changes starts propagating, you'll be able to login into your Inbox for sending and receiving emails.

6\. It is recommended to add DKIM signature. Please read the Next article to to know more about DKIM signatures.&#x20;

You ned to add this DKIM signature to your domain DNS settings as a TXT record.&#x20;


# What is DKIM signature

DKIM is a special digital signature affixed to outgoing emails in their headers. It permits any recipient of incoming mail to be sure that the letter was in fact sent from that domain.

## DKIM digital signature.

DKIM is a special digital signature affixed to outgoing emails in their headers. It permits any recipient of incoming mail to be sure that the letter was in fact sent from that domain. It is unlikely a DKIM-signed message will end up in a spam folder.

To turn DKIM on, you must add a special TXT record to your domain's DNS. It takes a day to get it up and running. As soon as it is up and running, all messages will begin to receive your digital signature automatically.

{% hint style="success" %}
You'll receive your domain's DKIM signature after verifying your domain for business email.
{% endhint %}

~~DKIM signature is available here, replace the demo value with your own username and domain name.~~ (This above method has been deprecated, you'll now receive the DKIM signature on your registered email after verifying your domain)


# Signing into your Business Email Account

{% hint style="danger" %}
If you are signing in for the first time then you need to complete the registration process by filling up your name and Date of birth and other security related questions.
{% endhint %}

1. Visit- <https://mailbox.vintcer.com>  and enter your username (example- <name@yourdomain.com>) and your Password.

![](/files/-LHT67nCrDW3lk2URKnC)

1. From your profile, click on your email and then select **Mail** to see or send your emails.

![](/files/-LHT5Gk4fkVznbF0NAma)


# Business Email forwarding to another address

**Attention.** Only new incoming messages are forwarded. You can't forward the following emails:

* Incoming messages that are already in your mailbox
* Sent mail
* Outgoing mail
* Spam

If you use two mailboxes simultaneously but want your mail from both sources to get sent to the same place, then set up mail forwarding from one mailbox to the other:

1. Open the menu Settings ![](https://yastatic.net/doccenter/images/support.yandex.com/en/mail/freeze/tL4Tq3vYHkpLGIxH2bysmC0-HGQ.png) → Message filters and click on Create filter.
2. In the ApplyApply section, select the type of emails in the list that you want the filter to apply to:\ <br>

![](/files/-LEBPcsFAoD66-aIa-1B)

3\. In the If section, enter the filtering condition:

![](/files/-LEBPy6a1duxajyhhgyj)

1. For more information about parameters and values, please read the Next article.

Several conditions can be specified for one filter. These conditions can be met simultaneously or separately:

1. In the If section, click Add condition, and select the parameter and its value.
2. Please, specify if these conditions must be fulfilled simultaneously:

![](/files/-LEBQBHX6AdBBDaglZZD)

3\. Enable the Forward to option and enter the address where you want emails to be sent. If you want to save copies of the forwarded emails, enable the save copy option.

4\. Click Create filter. Enter your Yandex password.

5\. Check the mailbox that you are forwarding messages to. You should get a message with instructions on how to confirm that you want your emails forwarded. After you confirm your choice, your new emails will be sent to the mailbox you entered.


# How to set up a condition (Business email forwarding)

In order for a filter to work properly, you need to put together its condition correctly. Enter a parameter for the condition, along with its value and how strictly the condition should apply.

## How to set up a condition <a href="#ariaid-title1" id="ariaid-title1"></a>

In order for a filter to work properly, you need to put together its condition correctly. Enter a parameter for the condition, along with its value and how strictly the condition should apply.![](https://yastatic.net/doccenter/images/support.yandex.com/en/mail/freeze/FiURyZP_28jiP7pF2lSadIAl9SY.png)

Enter the value of the chosen parameterHow strictly the condition should be metSelect a parameter

### Condition parameters and values

| Parameter       | What to specify as the parameter value                                                             | Example of parameter value               |
| --------------- | -------------------------------------------------------------------------------------------------- | ---------------------------------------- |
| From            | Sender address                                                                                     | <alice.the.girl@yandex.com>              |
| To or Сс        | Recipient address or Cc recipient address                                                          | <cheshire.katze@yandex.com>              |
| To              | Recipient address                                                                                  | <cheshire.katze@yandex.com>              |
| Сс              | Cc recipient address                                                                               | <just.mad.hatter@yandex.com>             |
| Subject         | Email subject                                                                                      | Madness                                  |
| Email body      | Email text                                                                                         | We're all mad here. I'm mad. You're mad. |
| Attachment name | Name of attached file                                                                              | document.pdf                             |
| Header          | [Information from message headers](https://yandex.com/support/mail/tech-glossary.html#mail-titles) | To: <cheshire.katze@yandex.com>          |

### How strictly the condition should apply

| Strictness      | Comment                                                                                                                                                                                                          | Usage example                                                                                                                                                                                                                     |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| matches         | The filter will apply to emails with parameters that exactly match the specified value (address or exact spelling of a word).                                                                                    | If Subject has the value “Madness”, the filter applies to messages with the subject “Madness is everywhere” and “Don't fight the madness”. But it won't apply to a message with the subject “About madnes”.                       |
| doesn't match   | The filter will apply to emails with parameters that don't exactly match the specified value (address or exact spelling of a word).                                                                              | If Subject has the value “Madness”, the filter applies to the message with the subject “About madnes”. The filter won't apply to messages with subjects like “Madness is everywhere” and “Don't fight the madness”.               |
| contains        | The filter will apply to emails with parameters that match the specified value or contain the specified characters (for example, all forms of the specified word or email addresses with the specified element). | If Subject has the value “cat”, the filter applies to messages with the subjects “Cheshire Cat”, “Caterpillar's advice” and “Catching up”.                                                                                        |
| doesn't contain | The filter will apply to messages that don't contain the specified characters.                                                                                                                                   | If Subject has the value “cat”, the filter applies to messages with subjects like “Madness is everywhere”, “Message from the Queen” and “I'm late”. Likewise, the filter won't apply to an email with the subject “Cheshire Cat”. |


# IMOS Integrated marketing operating system

Learn how to install and use IMOS in your website. IMOS comes with Live analytics and Live chat that you can use to talk to your visitors/clients. All for free.

## Installing IMOS- Integrated marketing operating system

1. Start by creating a account here- [https://imos.vintcer.com](https://imos.vintcer.com/) &#x20;
2. Click on the Chat button after Login into IMOS&#x20;

![](/files/-LgLBq3KJxNvsayi46MZ)

&#x20;3\. Copy Universal Embed Code and paste into your site header

![](/files/-LgLDWiUno8cKuqlkyme)

4\. Open your VINTCER website. From top bar click on Settings and then choose Pro settings

![](/files/-LgLCtrNIhbMu7elrsCm)

5\. Paste Universal Embed Code into Pro settings and click Save button

![](/files/-LgLEAmgjTFyqqKJFJEG)

6\. That's it. Go back to IMOS dashboard and your website data and chats will be available.&#x20;

{% hint style="info" %}

## You can also integrate IMOS directly through our SEO/Analytics panel. If you want to install through this way please read the steps below

{% endhint %}

1. Open the SEO/Analytics setup from top bar

![](/files/-LgLG9tAcwv1iiCaMX0N)

2\. Get your Universal Embed code and copy your Property ID

For example your Universal Embed code is- `<script defer src="https://app.im-os.com/os.js?propertyId=2983720a6-5mm2-4aea-a0ed-33w490dy6e7030"></script>`

then your property Id is- **`2983720a6-5mm2-4aea-a0ed-33w490dy6e7030`**

Enter your Property Id into IMOS Property Id column

![](/files/-LgLFr73lVNTN_c-J6CO)

Click on Set button and Publish your website by clicking on Publish button


# IMOS Live chat

## After installing IMOS in your website, a chat widget will be available on your website through which you can talk to your visitors or clients.

Whenever someone visits your website a chat widget and welcome message will be displayed. You can customize the welcome message from IMOS dashboard.&#x20;

![](/files/-LgLIIIPzQo36xXyqoHT)

## 2. You can see the Live chat and reply to messages from here. You can also see the PAST and chat history too.&#x20;

![](/files/-LgLJFVr2UuQBfDTBtjx)

## 3. Click on the 3 dots on right corner of chat window to see more details of visitors/clients you can also add internal notes etc.&#x20;

![](/files/-LgLLWdu_YuwyDrqaAuf)

## How to disable chat from website?

From top right corner. Click on the Available button and choose - **No Chat** to disable chat widget from your website.&#x20;

![](/files/-LgLMGgECwY6Fvzk2XIC)


# IMOS Live Analytics

VINTCER has built in Analytics and Live chat features.

{% hint style="info" %}
This article explains about using our built in Live analytics. You can use Google Analytics or any other third-party analytics too.&#x20;
{% endhint %}

## After installing IMOS to your website click on the Analyze button

{% hint style="info" %}
If you haven't installed the IMOS yet, please read[ this article](/marketing/imos-integrated-marketing-operating-system#installing-imos-integrated-marketing-operating-system)
{% endhint %}

![](/files/-LgLNVj_3i_890A51pn1)

## You can see the Live analytics in your Dashboard, Click on PRO button to explore more like traffic source, famous pages and events etc.&#x20;

![](/files/-LgLNlFUglcBbho0h1lp)


