No-Code tutorial#

Average read time: 3 minutes

After completing the “Getting Started” guide, the next step is to integrate ParityVend No-Code into your website. Designed for simplicity, the integration process requires no coding skills and can be completed quickly. The setup process is straightforward.

Step 1: Getting the Integration Code#

To start, you need to obtain the integration code that ParityVend has generated for you. Here’s how:

  • If the “Final Code” window is open:

    • If you have just created your project and still have the ‘Final Code’ window open, you can proceed to the next step.

  • If the “Final Code” window is closed:

    1. Go to the Dashboard.

    2. Click on your project.

    3. Select “Code” from the navigation menu.

    4. The “Final Code” window will appear.

Step 2: Copy integration code#

Once you have the ‘Final Code’ window open, you are ready to copy the integration code. Select the appropriate code mode based on your needs:

  • For live website integration (production): Select “Live” mode.

    • If you are ready to integrate ParityVend No-Code directly into your live website, select ‘live’ mode.

  • For testing on a local development environment: Select “Test” mode.

    • If you want to test your integration first and use your website from the localhost, select ‘test’ mode.

After selecting the code mode, click on the “Copy Code” button to copy your ParityVend No-Code integration code. Below, you can see an example of what the integration code looks like. Please note that this is just an example to provide you with an approximation of how it looks. Remember, your code may slightly differ and be a bit longer:

Example code (for your reference)#
<script id="parityvend-no-code">
   var parityvendScript = document.createElement("script");
   parityvendScript.onload = function () {
      parityvendUpdateConfig({
         design: "solid/diamond",
         apiKey: "........",
      });
      parityvendLoad();
   };
   parityvendScript.src = "https://api.parityvend.com/no-code-latest.js";
   document.head.appendChild(parityvendScript);
</script>

Step 3: Place code#

After copying your integration code, you need to place it on the pages of your website where you want ParityVend to work. We recommend placing ParityVend on the pages where customers see your product prices. This typically includes:

  • Pricing Pages: These present your product or service prices to potential customers. This is the most common ParityVend integration choice.

  • Landing Pages: These serve as the initial point of entry for visitors, often highlighting key offerings and value propositions. If your landing page includes pricing details, we recommend that you integrate ParityVend into it.

  • Main Pages: These are the central pages of your website, showcasing your primary content and services, such as any regular pages on your website or blog pages. If you have enough quota in your plan, we would recommend that you integrate ParityVend on nearly all pages of your website. Statistically, the number of pages where ParityVend is integrated directly increases the number of conversions.

Inserting code#

Once you’ve identified the target pages, insert your integration code within the <head> element of each page’s HTML structure. Specifically, insert it directly before the closing </head> tag. Here’s a visual example:

Where the No-Code integration code should go:#
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Your website</title>
   ...
   Your integration code for ParityVend No-Code goes here!
   Right before your page's closing "</head>" element.
   ...
</head>
<body>
   ...
</body>
</html>

Step 4: Done!#

Congratulations! With the code successfully integrated, ParityVend immediately begins its work, empowering your business with effortless globalization. From here, you can periodically check the Dashboard to see how many requests have been served by ParityVend and analyze your insights. To monitor its impact:

  • Access your ParityVend Dashboard.

  • View the number of requests processed by ParityVend.

  • Analyze valuable insights to guide your business strategies.

Integrating ParityVend No-Code with Third-Party Services#

If you use website builders, low-code or no-code constructors, or other third-party services, you can refer to the instructions below to integrate ParityVend No-Code with your service. If you don’t find instructions for your specific service, consider researching the support, FAQ, or reaching out to the technical support of your service to understand how to integrate custom HTML code into the <head> of your website.

Integrate No-Code in Shopify
  • Effortless Integration with Apps: Explore available Shopify apps that empower you to modify your website’s <head> without direct code editing. This often simplifies the process and minimizes the risk of errors.

  • Manual Theme File Editing:

    1. Navigate to your theme within your Online Store and select “Actions.”

    2. Click “Edit code” to access the theme files.

    3. Open the “Layout” folder, followed by “theme.liquid.”

    4. Locate the <head> section and paste your integration code directly before the closing </head> tag.

Note

The default file for adjustments may vary depending on your chosen theme. Consult the theme documentation to pinpoint the correct file, as it could be header.liquid, base.liquid, snippets/header.liquid, or other files.

Integrate No-Code in Wordpress

Follow WordPress’s official guide on adding code to <head>: WordPress support: Add Code to Headers

Integrate No-Code in Webflow

Webflow University offers a comprehensive guide on adding custom code to the <head>: Webflow: Custom code in head and body tags

Integrate No-Code in Wix

Refer to Wix’s guide on embedding custom code on your site: WIX: Embedding Custom Code on Your Site

Integrate No-Code in Framer

Framer Academy provides a detailed tutorial on adding custom code globally or to specific pages, along with a video tutorial: Framer Academy: Add Custom Code globally or to a single page

Integrate No-Code in GTAG (Google Tag Manager)

Utilize Google Tag Manager’s “custom HTML” option for seamless integration. Follow Google’s official guide for assistance: Google Tag Manager Help: Custom tags

Integrate No-Code in Circle Community (Circle.so)

Leverage Circle Community’s “head code snippets” feature for integration. Refer to Circle’s product update post for instructions: Circle: Add tracking pixels and CSS with head code snippets

Integrate No-Code in Kajabi

Note on “testing mode”#

Warning

When selecting “test” mode, ParityVend automatically adds a line containing your testing_secret into the integration code. This activates the No-Code’s testing mode, which intentionally disables security checks. You’ll also observe a warning about testing mode within your browser’s console. For a comprehensive understanding of the risks associated with leaving testing mode enabled on live websites, please refer to the “ParityVend Testing Mode” page.

Before launching your website with ParityVend No-Code, thoroughly testing the functionality is crucial. While ParityVend seamlessly operates on your live website’s domain, testing on your local development environment (e.g., localhost) or domains not matching your website isn’t possible without activating “testing mode.” due to security considerations.

Testing mode allows you to debug and test the integration within these non-live environments. To do so, ParityVend adds a line containing your unique testing_secret to the integration code. However, activating this mode has significant implications. It intentionally disables certain security checks for testing purposes, posing potential risks if left enabled on a live website.

Therefore, it’s vital to remember to remove the testing_secret line from your integration code before your website goes live. This ensures robust security and the smooth operation of ParityVend on your live website. The code block below highlights the line you always need to remove before going live:

<script id="parityvend-no-code">
   var parityvendScript = document.createElement("script");
   parityvendScript.onload = function () {
      parityvendUpdateConfig({
         design: "solid/diamond",
         apiKey: "........",
         testingSecret: "....................................",
      });
      parityvendLoad();
   };
   parityvendScript.src = "https://api.parityvend.com/no-code-latest.js";
   document.head.appendChild(parityvendScript);
</script>