How to Add the Astra Trust Seal to Your Web Application

Last updated: June 15, 2026

Introduction

The Astra Security Trust Seal is a badge you can embed in your web application to signal to visitors that your site has been security-tested by Astra. It loads via a lightweight SDK script and renders as a fixed-position element on the page.

This guide covers how to integrate the Trust Seal in React, Vue, and Angular, and how to customize its appearance.

Prerequisites

Before you begin, make sure you have:

An active project in React, Vue, or Angular
Your Site ID and Site Name — available from the Astra platform

Instructions

Create the Trust Seal component

Create a new component file in your project using the code for your framework below. Replace YOUR_SITE_ID and YOUR_SITE_NAME with your actual credentials from the Astra platform.

ReactJS

Create a new file called AstraaTrustSeal.tsx anywhere in your project:

import { useEffect } from "react"

declare global {
  interface Window {
    astra?: {
      siteId: string
      siteName: string
    }
    astraSDK?: {
      setSeal: () => void
    }
  }
}

export default function AstraTrustSeal() {
  useEffect(() => {
    window.astra = {
      siteId: "YOUR_SITE_ID",
      siteName: "YOUR_SITE_NAME",
    }

    const scriptId = "sdkscriptnode"
    let sdkScript = document.getElementById(scriptId) as HTMLScriptElement | null

    const handleScriptLoad = () => {
      window.astraSDK?.setSeal()
    }

    if (!sdkScript) {
      sdkScript = document.createElement("script")
      sdkScript.type = "text/javascript"
      sdkScript.async = true
      sdkScript.id = scriptId
      sdkScript.src = "https://api.getastra.com/dist/sdk.js"
      document.body.appendChild(sdkScript)
    }

    sdkScript.addEventListener("load", handleScriptLoad)

    if (window.astraSDK) {
      window.astraSDK.setSeal()
    }

    return () => {
      sdkScript?.removeEventListener("load", handleScriptLoad)
    }
  }, [])

  return (
    <div
      className="ga-trust-seal"
      data-size="medium"
      data-theme="dark"
      data-position="bottom-left"
    />
  )
}

Replace YOUR_SITE_ID and YOUR_SITE_NAME with your actual site ID and site name.

Use the component anywhere in your app:

import AstraTrustSeal from "./components/AstraTrustSeal"

export default function Page() {
  return (
    <>
      {/* your page content */}
      <AstraTrustSeal />
    </>
  )
}

VueJS

Create a new file called AstraTrustSeal.vue anywhere in your project:

<template>
  <div
    class="ga-trust-seal"
    data-size="medium"
    data-theme="dark"
    data-position="bottom-left"
  />
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'

const handleScriptLoad = () => (window as any).astraSDK?.setSeal()

onMounted(() => {
  (window as any).astra = {
    siteId: 'YOUR_SITE_ID',
    siteName: 'YOUR_SITE_NAME',
  }

  const scriptId = 'sdkscriptnode'
  let sdkScript = document.getElementById(scriptId) as HTMLScriptElement | null

  if (!sdkScript) {
    sdkScript = document.createElement('script')
    sdkScript.type = 'text/javascript'
    sdkScript.async = true
    sdkScript.id = scriptId
    sdkScript.src = 'https://api.getastra.com/dist/sdk.js'
    document.body.appendChild(sdkScript)
  }

  sdkScript.addEventListener('load', handleScriptLoad)
  if ((window as any).astraSDK) handleScriptLoad()
})

onUnmounted(() => {
  document.getElementById('sdkscriptnode')
    ?.removeEventListener('load', handleScriptLoad)
})
</script>

Replace YOUR_SITE_ID and YOUR_SITE_NAME with your actual site ID and site name.

Use the component anywhere in your app:

<template>
  <div>
    <!-- your page content -->
    <AstraTrustSeal />
  </div>
</template>

<script setup lang="ts">
import AstraTrustSeal from './components/AstraTrustSeal.vue'
</script>

AngularJS

Create a file called astra-trust-seal.component.ts with the following:

import {
  Component,
  AfterViewInit,
  OnDestroy,
  Inject,
  PLATFORM_ID,
} from '@angular/core'
import { isPlatformBrowser } from '@angular/common'

declare global {
  interface Window {
    astra?: {
      siteId: string
      siteName: string
    }
    astraSDK?: {
      setSeal: () => void
    }
  }
}

@Component({
  selector: 'app-astra-trust-seal',
  standalone: true,
  template: `
    <div
      class="ga-trust-seal"
      data-size="medium"
      data-theme="dark"
      data-position="bottom-left">
    </div>
  `,
})
export class AstraTrustSealComponent implements AfterViewInit, OnDestroy {
  private handleScriptLoad = () => window.astraSDK?.setSeal()

  constructor(@Inject(PLATFORM_ID) private platformId: object) {}

  ngAfterViewInit(): void {
    if (!isPlatformBrowser(this.platformId)) return

    window.astra = {
      siteId: 'YOUR_SITE_ID',
      siteName: 'YOUR_SITE_NAME',
    }

    const scriptId = 'sdkscriptnode'
    let sdkScript = document.getElementById(scriptId) as HTMLScriptElement | null

    if (!sdkScript) {
      sdkScript = document.createElement('script')
      sdkScript.type = 'text/javascript'
      sdkScript.async = true
      sdkScript.id = scriptId
      sdkScript.src = 'https://api.getastra.com/dist/sdk.js'
      document.body.appendChild(sdkScript)
    }

    sdkScript.addEventListener('load', this.handleScriptLoad)
    if (window.astraSDK) this.handleScriptLoad()
  }

  ngOnDestroy(): void {
    document.getElementById('sdkscriptnode')
      ?.removeEventListener('load', this.handleScriptLoad)
  }
}

Replace YOUR_SITE_ID and YOUR_SITE_NAME with your actual site ID and site name.

Use the component in any template by first importing it in the parent component:

import { Component } from '@angular/core'
import { AstraTrustSealComponent } from './astra-trust-seal/astra-trust-seal.component'

@Component({
  standalone: true,
  imports: [AstraTrustSealComponent],
  template: `
    <!-- your page content -->
    <app-astra-trust-seal />
  `,
})
export class SomeComponent {}

Customize the seal's appearance

The seal's appearance is controlled by three data-* attributes on the component's div. These attributes are framework-agnostic and work the same way across React, Vue, Angular, and any other integration.

Data-size

Controls the physical size of the badge.

	ValueDescription
small	Compact badge
medium	Default size
large	Prominent badge

Data-theme

Controls the colour scheme of the badge.

	ValueDescription
light	Light background badge
dark	Dark background badge

Data-position

Controls where the seal is anchored on the page. The seal renders as a fixed-position element, so this positions it relative to the viewport rather than its parent container.

	ValueDescription
bottom-left	Fixed to the bottom-left corner of the viewport
bottom-right	Fixed to the bottom-right corner of the viewport

Example

<div
  className="ga-trust-seal"
  data-size="medium"
  data-theme="dark"
  data-position="bottom-left"
/>

Expected Outcome

Once the component is mounted and the SDK script loads, the Astra Trust Seal will appear as a fixed badge on your page at the position you configured. It will be visible to all visitors across any page where the component is rendered.

Best Practices

Place the component at the root level of your app (such as a shared layout) so the seal appears consistently across all pages, rather than re-mounting it per route.
Don't hardcode credentials in version control. Pass siteId and siteName via environment variables instead of committing them directly in the component.
Use one instance of the SDK script. The component already checks for an existing script tag before injecting a new one — avoid rendering multiple instances of the component simultaneously to prevent conflicts.
Match the theme to your site's design. Use data-theme="light" on dark-background pages and data-theme="dark" on light-background pages for maximum contrast and visibility.
Test on mobile viewports. Since the seal is viewport-fixed, verify that it doesn't overlap critical UI elements like navigation bars or CTAs on smaller screens.