How to Integrate VoltSec.io Badge into WordPress, Shopify, and Custom Websites

The Voltsec.io Security Badge allows your visitors to instantly verify your website’s security status. When clicked, it opens your VoltSec.io Trust Page, displaying your latest security status, updates, and certificate authenticity information. This guide explains how to add the Voltsec.io Badge to WordPress, Shopify, and Custom HTML websites.

Written By Prashant Goel

Last updated 3 months ago

Voltsec.io, Voltsec.io Trust Center, Pentest, PTaaS, Voltsec.io Badge

Get Your Voltsec.io Badge Code

  1. Copy This HTML Embed Code →

Example
<iframe 
  src="https://badge.voltsec.io/?cert=[Enter-Your-Certificate-Id-Here]"
  style="border:0;width:120px;height:40px;overflow:hidden;"
  scrolling="no"
  referrerpolicy="no-referrer"
></iframe>

You will use this code in all website platforms.

Integrating the Badge

A) WordPress (Any Theme / Elementor / Block Editor)

Method 1: Using the WordPress Widget (Recommended)

  1. Go to WordPress Dashboard → Appearance → Widgets

  2. Add a Custom HTML widget to your footer.

  3. Paste your VoltSec badge embed code.

  4. Save the widget.

  5. Clear cache (if using WP Super Cache / LiteSpeed / Cloudflare).

Your badge now appears on every page.

Method 2: Using Elementor

  1. Open your Footer Template in Elementor.

  2. Drag the HTML widget into the desired position.

  3. Paste your VoltSec badge code.

  4. Update and save the template.

Method 3: Add via Theme Footer File (Developer Method)

  1. Go to Appearance → Theme File Editor.

  2. Open footer.php.

  3. Paste your badge code right before </body>.

  4. Save changes.

B) Shopify

Shopify themes use Liquid templates. The badge is usually placed in the footer.

Steps to Add the Badge:

  1. Go to Shopify Admin → Online Store → Themes.

  2. Click Customize.

  3. Go to Footer section → Add Block → Custom Liquid (or Custom HTML).

  4. Paste your VoltSec Badge embed code.

  5. Save your theme.

If your theme doesn’t support blocks:

  1. Go to Actions → Edit Code

  2. Open sections/footer.liquid

  3. Paste your embed code before </footer>

  4. Save file

Your badge will now show on all pages.

C) Custom Websites (HTML, React, Next.js, PHP, etc.)

You can place the badge anywhere on your site, but most developers add it to the footer.

1. Pure HTML Website

Paste your badge embed code before the closing </body>:


<iframe src="https://badge.voltsec.io/?cert=[Enter-Your-Certificate-Id-Here]" style="border:0;width:120px;height:40px;overflow:hidden;" scrolling="no" referrerpolicy="no-referrer"



</iframe>

Save the file and upload it to your server.

2. React or Next.js

Add your badge code inside your global Footer component:

<div dangerouslySetInnerHTML={{ __html: `YOUR_BADGE_CODE` }} />

Or for Next.js, add inside app/layout.jsx or _document.jsx:

<script dangerouslySetInnerHTML={{ __html: `YOUR_BADGE_CODE` }} />

3. PHP Websites (CodeIgniter, Laravel, Custom PHP)

Add the embed script in footer.php:

<?php echo 'YOUR_BADGE_CODE'; ?>

Or directly paste the HTML snippet.

4. Wordpress-like Custom Themes

Insert inside your global footer partial:

views/footer.ejs components/Footer.vue layouts/footer.handlebars

Paste the embed code before the body ends.

Verify the Badge is Working

Once integrated:

✔ Badge appears in your footer or selected position
✔ Clicking it opens your VoltSec Security Page
✔ Visitors can verify your certificate authenticity

If it doesn’t appear:

– Clear browser cache
– Clear CDN cache (Cloudflare / Vercel / Netlify)
– Make sure the script link is not blocked by CSP headers
– Ensure JavaScript is enabled on your site

Need Help?

If you face any issue while integrating the badge, contact:

📩 support@voltsec.io
or open a ticket inside the Voltsec.io Help Desk.