Trust Seal Integration

Last updated: March 31, 2026

ReactJS

This guide walks you through adding the Astra Security Trust Seal to a React application. It covers the full component setup and how your site credentials are passed.

Prerequisites

A React project (Create React App, Vite, or similar)
Your siteId and siteName — provided by the Astra platform

Component

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

This guide walks you through adding the Astra Security Trust Seal to a Vue application. It covers the full component setup and how your site credentials are passed.

Prerequisites

A Vue project
Your siteId and siteName — provided by the Astra platform

Component

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

This guide walks you through adding the Astra Security Trust Seal to an Angular application. It covers the full component setup and how your site credentials are passed.

Prerequisites

An Angular project
Your siteId and siteName — provided by the Astra platform

Component

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 {}

Styling Guide

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"
/>