diff --git a/app/integrations/nextjs/page.tsx b/app/integrations/nextjs/page.tsx new file mode 100644 index 0000000..12ec2c4 --- /dev/null +++ b/app/integrations/nextjs/page.tsx @@ -0,0 +1,129 @@ +'use client' + +import Link from 'next/link' +import { ArrowLeftIcon } from '@ciphera-net/ui' + +export default function NextJsIntegrationPage() { + return ( +
+ {/* * --- ATMOSPHERE (Background) --- */} +
+
+
+
+
+ +
+ + + Back to Integrations + + +
+
+ + + +
+

+ Next.js Integration +

+
+ +
+

+ The best way to add Pulse to your Next.js application is using the built-in next/script component. +

+ +
+ +

Using App Router (Recommended)

+

+ Add the script to your root layout file (usually app/layout.tsx or app/layout.js). +

+ +
+
+ app/layout.tsx +
+
+ 
+{`import Script from 'next/script'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    
+      
+        
+    
+    My React App
+  
+  
+    

+  
+`}
+
+
+
+ +

Method 2: Programmatic Injection

+

+ If you need to load the script dynamically (e.g., only in production), you can use a useEffect hook in your main App component. +

+ +
+
+ src/App.tsx +
+
+ 
+{`import { useEffect } from 'react'
+
+function App() {
+  useEffect(() => {
+    // Only load in production
+    if (process.env.NODE_ENV === 'production') {
+      const script = document.createElement('script')
+      script.defer = true
+      script.setAttribute('data-domain', 'your-site.com')
+      script.src = 'https://pulse.ciphera.net/script.js'
+      document.head.appendChild(script)
+    }
+  }, [])
+
+  return (
+    

+      
Hello World

+    

+  )
+}`}
+
+
+
+
+
+
+ ) +} diff --git a/app/integrations/vue/page.tsx b/app/integrations/vue/page.tsx new file mode 100644 index 0000000..40adb04 --- /dev/null +++ b/app/integrations/vue/page.tsx @@ -0,0 +1,113 @@ +'use client' + +import Link from 'next/link' +import { ArrowLeftIcon } from '@ciphera-net/ui' + +export default function VueIntegrationPage() { + return ( +
+ {/* * --- ATMOSPHERE (Background) --- */} +
+
+
+
+
+ +
+ + + Back to Integrations + + +
+
+ + + + +
+

+ Vue.js Integration +

+
+ +
+

+ Integrating Pulse with Vue.js is straightforward. You can add the script to your index.html file. +

+ +
+ +

Method 1: index.html (Recommended)

+

+ Add the script tag to the <head> section of your index.html file. This works for both Vue 2 and Vue 3 projects created with Vue CLI or Vite. +

+ +
+
+ index.html +
+
+ 
+{`
+
+  
+    
+    
+    
+    
+    
+    
+    My Vue App
+  
+  
+    

+    
+  
+`}
+
+
+
+ +

Method 2: Nuxt.js

+

+ For Nuxt.js applications, you should add the script to your nuxt.config.js or nuxt.config.ts file. +

+ +
+
+ nuxt.config.ts +
+
+ 
+{`export default defineNuxtConfig({
+  app: {
+    head: {
+      script: [
+        {
+          src: 'https://pulse.ciphera.net/script.js',
+          defer: true,
+          'data-domain': 'your-site.com'
+        }
+      ]
+    }
+  }
+})`}
+
+
+
+
+
+
+ ) +} diff --git a/app/integrations/wordpress/page.tsx b/app/integrations/wordpress/page.tsx new file mode 100644 index 0000000..a1db8ef --- /dev/null +++ b/app/integrations/wordpress/page.tsx @@ -0,0 +1,81 @@ +'use client' + +import Link from 'next/link' +import { ArrowLeftIcon } from '@ciphera-net/ui' + +export default function WordPressIntegrationPage() { + return ( +
+ {/* * --- ATMOSPHERE (Background) --- */} +
+
+
+
+
+ +
+ + + Back to Integrations + + +
+
+ + + +
+

+ WordPress Integration +

+
+ +
+

+ You can add Pulse to your WordPress site without installing any heavy plugins, or by using a simple code snippet plugin. +

+ +
+ +

Method 1: Using a Plugin (Easiest)

+
    +
  1. Install a plugin like "Insert Headers and Footers" (WPCode).
    2. +
  2. Go to the plugin settings and find the "Scripts in Header" section.
    3. +
  3. Paste the following code snippet:
    4. +
+ +
+
+ Header Script +
+
+ 
+{``}
+
+
+
+ +

Method 2: Edit Theme Files (Advanced)

+

+ If you are comfortable editing your theme files, you can add the script directly to your header.php file. +

+
    +
  1. Go to Appearance > Theme File Editor.
    2. +
  2. Select header.php from the right sidebar.
    3. +
  3. Paste the script tag just before the closing </head> tag.
    4. +
+
+
+
+ ) +}