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.

Select banner design#

Use the “Select banner design” field to pick the best banner design for your website. On a desktop, you can also use the “up” and “down” keys on your keyboard to quickly preview designs. Currently, ParityVend offers 99 hand-crafted designs, divided into five groups.

  • Solid designs: Featuring solid, minimalistic colors. An elegant choice for most websites.

  • Glass designs: Use the “backdrop-filter: blur” to achieve the glass morphism effect. Quite a trendy choice.

  • Gradients designs: Bold, vivid colors that easily grab visitors’ attention. Feature linear gradients as the background.

  • Borders Dark and Borders Light designs: Both use the colors from the “Solid” group to create well-balanced looks. A good choice that will fit nearly all websites.

Dynamic banner preview#

Right above the “Next” button, there’s a dynamic preview showing how your banner will look. The dynamic banner preview is another powerful feature of ParityVend, allowing you to see all the changes made to the banner, including the selected design, configured country group discounts, banner text, and even custom CSS in real time.

You can also use a selection field located in the lower part of the preview. By clicking on this field, you can see how the banner will look in any of the 241 regions/countries. The dynamic preview will also notify you if the selected preview country is not properly configured or has been moved to the “Inactive” group, helping you quickly understand, identify, and fix errors. The dynamic banner preview can be found not only in the second step but in several other configuration windows where its presence might be helpful.

Customize banner#

The last elements visible in the second step are the “Customize design” and “Change text” buttons, located above the dynamic preview. The “Customize design” button will take you to a menu where you can navigate to other windows, allowing you to add custom CSS code, change the banner text, or modify the banner’s positioning.

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-banner
    • The banner’s “body”. Some examples of styles that you could apply here are background, border-radius, background-color, border, padding, position, etc.

  • .parityvend-banner-inner
    • The banner’s text. Some styles that you could apply include color, font-family, font-size, font-weight, etc.

  • .parityvend-close
    • The ‘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.

Change Banner Text#

The primary element is the text area, where you can input the banner text, displayed to your website’s visitors. As you type, the dynamic banner preview will instantly reflect your changes.

Beneath the text area, you’ll find ‘quick presets’ that operate similarly to those in the custom CSS window. Click on a quick preset to insert its contents into the text area. ParityVend provides 13 pre-made presets for your convenience.

Note

When a ‘quick preset’ is applied, the text area will reset and display the preset’s contents. Ensure that you don’t lose any valuable text you’ve entered.

Variables in banner text#

Below the quick presets, you’ll find a list of all variables available for use in the banner’s text. Click on any variable to copy it to the clipboard. ParityVend automatically replaces these variables in the banner’s text with the visitor’s information.

For example, suppose you’ve set up a 35% discount for all visitors in Ukraine using the coupon “EXAMPLE_COUPON_35”. In this case, for a visitor from Ukraine, the {country_name} variable will be automatically replaced with Ukraine. Similarly, all variables will be “rendered” and inserted into the configured banner text. Refer to the list below for a detailed overview of how the variables will be replaced in this example:

  • {discount_str}35%
    • The discount you configured for the visitor’s country, formatted as a “humanized” percent.

    • Examples: 50%, 10.55%, 5%.

  • {coupon_code}EXAMPLE_COUPON_35
    • The coupon you configured for the visitor’s country.

  • {discount}0.35
    • The discount you configured for the visitor’s country, formatted as a float.

    • Examples: 0.1, 0.5, 0.33, 0.6123

  • {country_name}Ukraine
    • Visitor’s country name.

    • Examples: Colombia, Venezuela, Brazil, Canada

  • {country_code}UA
    • The visitor’s country code in the ISO 3166-1 alpha-2 standard. One special assignment is XX, which means that the visitor uses a VPN, Proxy, or TOR.

    • Examples: US, AU, AL, GB, XX.

  • {country_flag}🇺🇦
    • Country flag emoji of the visitor.

    • Examples: 🇺🇸, 🇺🇦, 🇬🇧.

  • {currency_code}UAH
    • The currency code of the visitor’s country in the ISO 4217 standard.

    • Examples: USD, GBP, EUR.

  • {currency_symbol}
  • {currency_localized_symbol}UAH₴
    • The currency symbol and the currency code of the visitor’s country, in the explicit format.

    • Examples: PLNzł, USD$, PYG₲

  • {conversion_rate}37.89
    • Conversion rate from the base currency (USD, or base_currency for API endpoints that support it) to the visitor’s country currency.

    • Examples: 0.91, 83.06

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.