+ Alternatively, reference an external script in your angular.json build configuration. However, for analytics scripts that need defer and data-* attributes, Method 1 is simpler and recommended.
+
+
+
Configuration Options
+
+
+ data-domain: The domain name you added to your Pulse dashboard (e.g., example.com).
+
+
+ defer: Ensures the script loads without blocking the page.
+
+
+
+ )
+}
diff --git a/app/integrations/astro/page.tsx b/app/integrations/astro/page.tsx
new file mode 100644
index 0000000..004c687
--- /dev/null
+++ b/app/integrations/astro/page.tsx
@@ -0,0 +1,60 @@
+'use client'
+
+import { IntegrationGuide } from '@/components/IntegrationGuide'
+import { CodeBlock } from '@/components/CodeBlock'
+import { getIntegration } from '@/lib/integrations'
+import { notFound } from 'next/navigation'
+
+export default function AstroIntegrationPage() {
+ const integration = getIntegration('astro')
+ if (!integration) return notFound()
+
+ return (
+
+
+ Astro makes it easy to add third-party scripts. Drop the Pulse snippet into your base layout and you're done.
+
+
+
+
+
Base Layout (Recommended)
+
+ Add the script to the <head> of your base layout file so it loads on every page.
+
+
+
+{`---
+// Base layout used by all pages
+---
+
+
+
+
+
+
+
+
+ My Astro Site
+
+
+
+
+`}
+
+
+
Using Astro's Script Integration
+
+ You can also configure the script in your astro.config.mjs using the injectScript API of an Astro integration, but the layout approach above is simpler for most projects.
+
+
+
Astro + View Transitions
+
+ If you use Astro's View Transitions, the Pulse script persists across navigations automatically since it is loaded in the <head> with defer.
+
+
+ )
+}
diff --git a/app/integrations/gatsby/page.tsx b/app/integrations/gatsby/page.tsx
new file mode 100644
index 0000000..5191b88
--- /dev/null
+++ b/app/integrations/gatsby/page.tsx
@@ -0,0 +1,65 @@
+'use client'
+
+import { IntegrationGuide } from '@/components/IntegrationGuide'
+import { CodeBlock } from '@/components/CodeBlock'
+import { getIntegration } from '@/lib/integrations'
+import { notFound } from 'next/navigation'
+
+export default function GatsbyIntegrationPage() {
+ const integration = getIntegration('gatsby')
+ if (!integration) return notFound()
+
+ return (
+
+
+ Add Pulse to your Gatsby site using the gatsby-ssr API or the Gatsby Head API.
+
+
+
+
+
Method 1: gatsby-ssr.js (Recommended)
+
+ Use the onRenderBody API to inject the script into every page's <head>.
+
+ If you prefer the newer Head API, export a Head component from your layout or page.
+
+
+
+{`export function Head() {
+ return (
+ <>
+ My Gatsby Site
+
+
+ )
+}`}
+
+
+
+ The gatsby-ssr.js approach is better for global scripts because it automatically applies to every page without needing to add it to each route individually.
+
+
+ )
+}
diff --git a/app/integrations/ghost/page.tsx b/app/integrations/ghost/page.tsx
new file mode 100644
index 0000000..262e19f
--- /dev/null
+++ b/app/integrations/ghost/page.tsx
@@ -0,0 +1,55 @@
+'use client'
+
+import { IntegrationGuide } from '@/components/IntegrationGuide'
+import { CodeBlock } from '@/components/CodeBlock'
+import { getIntegration } from '@/lib/integrations'
+import { notFound } from 'next/navigation'
+
+export default function GhostIntegrationPage() {
+ const integration = getIntegration('ghost')
+ if (!integration) return notFound()
+
+ return (
+
+
+ Add Pulse to your Ghost publication using the built-in Code Injection feature.
+
+
+
+
+
Code Injection (Recommended)
+
+
Log in to your Ghost admin panel.
+
Go to Settings > Code injection.
+
In the Site Header field, paste the following snippet:
+
+
+
+{``}
+
+
+
+
Click Save.
+
+
+
Theme-Level Integration (Alternative)
+
+ If you prefer, you can also add the script directly to your Ghost theme's default.hbs file, just before the closing </head> tag. This approach requires re-uploading the theme whenever you make changes.
+
+
+
Important Notes
+
+
+ data-domain: Use your publication's domain (e.g., blog.example.com).
+
+
+ Code Injection is available on all Ghost plans, including the free self-hosted version.
+
+
+
+ )
+}
diff --git a/app/integrations/hugo/page.tsx b/app/integrations/hugo/page.tsx
new file mode 100644
index 0000000..2aa0b6f
--- /dev/null
+++ b/app/integrations/hugo/page.tsx
@@ -0,0 +1,65 @@
+'use client'
+
+import { IntegrationGuide } from '@/components/IntegrationGuide'
+import { CodeBlock } from '@/components/CodeBlock'
+import { getIntegration } from '@/lib/integrations'
+import { notFound } from 'next/navigation'
+
+export default function HugoIntegrationPage() {
+ const integration = getIntegration('hugo')
+ if (!integration) return notFound()
+
+ return (
+
+
+ Add Pulse to your Hugo site by placing the script in a partial or directly in your base template.
+
+
+
+
+
Method 1: Partial (Recommended)
+
+ Create an analytics partial and include it in your base template's <head>.
+
+
+
+{`{{ if not .Site.IsServer }}
+
+{{ end }}`}
+
+
+