How to create a new project¶
Average read time: 11 minutes.
This guide provides instructions on how to create new projects with ParityVend. It covers all features, elements, and details of creating new projects. For a more brief introduction of how to create your first project, read the “Getting Started”” guide.
Creating a new project¶
From the ParityVend dashboard, click on the “new project +” button. This will take you to the process of creating a project, which is always the same. It only takes three steps to create a project, let’s start with the first step.
New project: Step #1¶
In the first step of the project creation process, you need to enter the domain of your website. This can be done by either writing the domain directly into the domain input field or by pasting the URL of your website into the domain field. In this case, ParityVend will automatically extract the domain from the URL you pasted.
Note
Don’t enter the ‘www.’ prefix. If entered, ParityVend will remove it automatically.
If you are not sure what to enter, here are some examples of valid domains that you can enter into this field:
example.com
example.co.uk
example.com.au
ambeteco.com
somesubdomain.ambeteco.com
multilevel.subdomains.ambeteco.com
To illustrate this, let’s take several more examples. If the URL of your website where you plan to integrate ParityVend is https://www.ambeteco.com/, then the domain extracted from it would be ambeteco.com. Similarly, for the URL https://interstellarseo.com/ the domain will be interstellarseo.com, and for https://www.coreinvestinghub.com/, the domain will be coreinvestinghub.com.
Warning
ParityVend Origin Checking
ParityVend employs a security feature called Origin Checking to enhance the integrity of your integration. This mechanism plays a crucial role in preventing unauthorized use of your integration by ensuring that only requests coming from your website are accepted.
When you access a page or send a request (in this case, to the ParityVend solutions), your web browser automatically includes a special Origin header. ParityVend checks this header to verify that the request genuinely originates from your website, rather than from someone attempting to exploit your integration.
Because of this, it is extremely important to specify the correct domain of your website during the ParityVend setup process. If an incorrect domain is entered, ParityVend will reject any requests made from your website, as they would be considered “malicious”. To learn more, read the “ParityVend Testing Mode” guide.
Once you have entered your website’s domain, click on the ‘next’ button to move to the second step.
New project: Step #2¶
In the next step, you can personalize the banner’s appearance. This step is mainly for the No-Code solution. If you intend to use the API solution, you can simply click the “Next” button to proceed.
For the No-Code solution, the second step is where you can customize the banner. Let’s explain each element you see in this step and what you can do with them.
New project: Step #2 - Customization¶
From the ‘customize’ menu, select the ‘custom style’ option to open a new window where you can enter your custom CSS code for deep personalization of the banner. On the ‘custom style’ window, you will find three main elements, described below.
Custom CSS code¶
By default, the text area where you can enter your custom CSS code will show a starting point with the banner’s selectors already prepared for you. Simply click on the text area, and the pre-made code will be inserted automatically. This pre-made code has three CSS selectors prepared for you:
.parityvend-bannerThe banner’s “body”. Some examples of styles that you could apply here are
background,border-radius,background-color,border,padding,position, etc.
.parityvend-banner-innerThe banner’s text. Some styles that you could apply include
color,font-family,font-size,font-weight, etc.
.parityvend-closeThe ‘close’ button, is implemented as an ‘x’ character. Styles may include
background,border,border-radius,color,font-size,font-weight.
To enhance your experience, the ‘custom style’ window also offers 7 ‘quick presets’ below the text area. To apply a ‘quick preset’, click on it. You can use it to add some common CSS changes, such as changing the banner’s font, border-radius, or styling the variables.
Note
When the ‘quick preset’ is applied, the text area will be reset and replaced with the preset’s contents. Please make sure you don’t lose any custom CSS code.
Thanks to the dynamic banner preview, all the custom CSS that you enter is automatically applied to the banner. This is another amazing feature of ParityVend that will surely save you lots of time while styling the banner. Most importantly, the dynamic banner preview ensures that the CSS and banner’s design are loaded in such a way that provides an accurate representation of how the banner will look with your custom CSS.
Note
When using custom CSS with the banner, pay attention to the wildcard styles that your website may have. Your website may already have some other styles that can influence or change the appearance of the banner, for example, span { color: red!important }. When writing custom CSS, keep this in mind.
New project: Step #2 - Change text¶
From the ‘customize’ menu, choose the ‘change text’ option to open a new window for customizing the banner’s text. Within the ‘change text’ window, you’ll find four main elements.
New project: Step #2 - Positioning¶
From the ‘customize’ menu, select the ‘positioning’ option to open a new window for customizing the banner’s position. Within the ‘positioning’ window, you’ll find three main elements.
Custom positioning¶
Similar to the custom CSS window, you can enter custom positioning CSS to ensure the banner is positioned according to your website’s design choices. The code with the prepared CSS selector is already available for your convenience. Simply click on the text area, and the pre-made code will be inserted automatically. Apply the banner positioning to the .parityvend-banner selector.
New project: Step #3¶
The third step is the most crucial part of the project configuration, where you set up the country groups and configure discounts and coupon codes for them. This can be considered the most important configuration of the entire project.
What are “country groups”?¶
In ParityVend, “country groups” refer to a list of countries that have a discount and coupon. For example, you can create a country group that includes three countries: “Brazil”, “Peru”, “Mexico”, and set its discount to 40%, along with a coupon code “AKFNVJQORIXP”.
Then, when a user from one of these countries - “Brazil”, “Peru”, “Mexico” - visits your website, ParityVend will identify the visitor’s location, perform security checks, and, if the visitor is not using VPN, Proxy, or TOR, show a banner with the configured discount and coupon. The variables in the banner’s text corresponding to these values, which are {discount_str}, {coupon_code}, {discount}, will be replaced with your configured values for this country group. Learn more about the variables in the banner text. ↑
Country groups preset¶
ParityVend provides 10 country grouping presets for your convenience, utilizing two base grouping methods: “ParityVend Balance” and “ParityVend Balance + Inactive”. ParityVend Balance is a country grouping preset designed to optimize performance for e-commerce and digital stores. It combines well-established economic principles with practical insights from the field, offering a comprehensive approach to managing international sales. Additionally, “ParityVend Balance + Inactive” includes an “inactive” group with countries currently under sanctions or not recommended for use. Furthermore, ParityVend offers 8 more presets with pre-adjusted discounts ranging from 0%-70% to 0%-30% based on your business’s discounting capability.
To apply a country grouping preset, select the preset of interest from the dropdown menu. Please be aware that selecting a new preset will replace your current group configuration, so ensure you do not lose any important settings. You can also reset your current configuration to the preset by clicking the “reset” button.
Configuring the country groups¶
The country grouping interface is designed to provide a convenient, powerful, and quick way to create and modify country groups using drag-and-drop and multi-selection principles. Each country group is displayed as a horizontal block with two columns: the list of countries and input fields for the coupon and discount.
Changing/adding coupons¶
To update the coupon for a specific country group, click on the coupon field and enter the new coupon. The length of the coupon should not exceed 64 characters.
Changing discounts¶
To update the discount for a specific country group, click on the discount field and enter the new discount as a percentage value (e.g., “50”, “10”, “9”, “70”, etc. - don’t enter the ‘%’ sign). You can also use the “up” and “down” keyboard keys to conveniently adjust the discount value. The discount value can be entered with 2 digits of precision, allowing values like “49.52”, “8.77”, “70.01”, etc.
Interacting with Countries¶
Each country offers interactive UI features, primarily based on the intuitive drag-and-drop functionality. You can easily move any country from one group to another by simply dragging and dropping it. Should you wish to cancel the dragging process, you can simply release the country.
When you start dragging a country, a special menu will appear in the second column of the country group with two buttons: “move to new group” and “move to inactive”. You can drag and drop the country into one of these buttons to create a new country group or move the country to the “inactive” group.
Additionally, clicking on a country activates the multi-selection mode: as an indication, the border of the country becomes highlighted. You can add or remove countries from the selection by clicking on them. Once selected, you can drag any country, and all other selected countries will move with it, providing a quick way to move multiple countries to other country groups.
If a country group becomes empty, a “delete” button will automatically appear on the left side of the countries list. Click on it to delete the country group.
Preview and save¶
Similar to other windows, a dynamic banner preview is available to show your changes in real time. After pressing the “save” button, ParityVend will validate your entered data. Empty fields will be highlighted in red, and orange highlights indicate fields left empty. If the coupon or discount fields are left empty, users in those countries will not receive any discounts, and the banners will not be shown to them. This validation serves as a warning, but if you intentionally decide to leave some fields empty, click on the respective text in the warning to continue the save process with empty fields.
New project: Step #4¶
After saving the project, you will be directed to a new window called ‘final code’, displaying three main elements. This window represents the final stage of the project creation process.
Final code¶
The primary feature in this window is a text area showing the No-Code integration code, which you need to insert into the <head> of your browser. For more details, please refer to the “Step 3: Place code” section. Additionally, you can use the “live” and “debug” buttons to switch the code between the live and debug versions, which is convenient for testing purposes.
API keys¶
Beneath the text area, you will find three API keys: public_key, private_key, and testing_secret. Click on a key to copy it to the clipboard. For further details, refer to the API Tutorial. You can always view these keys or reissue them in the API window.
New project: Finish¶
Upon successful completion of the process, a new project will appear on the main dashboard window. Click on this project, titled with the domain you entered, to view, modify, deactivate, reactivate, or delete the project, as well as access its integration code and API keys. For more information, refer to the “Working with existing project” page.