This directory contains the Integrations hub pages—a key part of DigitalStaff’s marketing strategy targeting businesses needing to connect and automate their software systems.
The Integrations hub showcases how we connect business software like QuickBooks, Xero, Buildertrend, Power BI, Excel, and Azure with other systems to eliminate manual data entry and enable workflow automation. Each integration page demonstrates:
This is similar to Zapier, but focused on apps that don’t have Zapier integration or require more sophisticated enterprise automation.
/src/pages/integrations/
├── index.astro # Hub landing page (main integrations directory)
├── integrations-template.astro # Template for creating new integration pages
├── quickbooks.astro # QuickBooks Online integration page
├── xero.astro # Xero integration page
├── buildertrend.astro # Buildertrend integration page
├── powerbi.astro # Power BI integration page
├── excel.astro # Microsoft Excel integration page
├── azure.astro # Microsoft Azure integration page
└── README.md # This file
cd src/pages/integrations
cp integrations-template.astro your-new-integration.astro
Use kebab-case for filenames (e.g., salesforce.astro, shopify.astro). Keep them short and memorable for SEO.
Open your new file and update the following sections:
const integrationTitle = "Salesforce";
const integrationDescription = "Automate Salesforce integration with...";
const integrationCategory = "CRM"; // Options: Financial Software, Construction Management, Business Intelligence, Cloud Platforms, Office & Productivity, CRM, E-commerce
Update the stats to reflect integration automation benefits:
const stats = [
{
value: '95%',
label: 'Time Saved',
icon: '⏱️',
description: 'Reduction in manual data entry and transfer'
},
// ... more stats
];
Define the problems businesses face with manual integration:
const challenges = [
{
title: 'Double Data Entry',
description: 'Why manual data entry between systems is problematic...',
icon: '⌨️'
},
// ... more challenges
];
Show what systems this integration connects to:
const connectedSystems = [
{
name: 'Accounting Software',
description: 'Sync with QuickBooks, Xero, NetSuite...',
icon: '💰'
},
// ... more connected systems
];
List specific integration features and automations:
const capabilities = [
{
title: 'Automated Data Sync',
description: 'Real-time synchronization between systems...',
icon: '🔄',
benefits: [
'Bi-directional data flow',
'Conflict resolution handling',
'Field mapping and transformation',
'Real-time or scheduled sync'
]
},
// ... more capabilities
];
Add integration-specific FAQs:
const faqs = [
{
question: 'How long does it take to set up this integration?',
answer: 'Most integrations are up and running within 2-4 weeks...'
},
// ... more FAQs
];
const caseStudies = [
{
title: 'Company Name: Integration Success Story',
description: 'Full case study description...',
image: caseStudyImages.manufacturing,
metrics: ['15 hrs/week saved', '$30K annual savings'],
client: 'Company Name',
industry: 'Industry'
}
];
Add your new integration to /src/pages/integrations/index.astro:
const integrations = [
// ... existing integrations
{
name: 'Salesforce',
slug: 'salesforce',
category: 'CRM',
description: 'Brief description of the integration automation...',
icon: '☁️'
}
];
Update the categories if needed:
const categories = {
'Financial Software': ['Financial Software'],
'Construction Management': ['Construction Management'],
'Business Intelligence': ['Business Intelligence'],
'Office & Productivity': ['Office & Productivity'],
'Cloud Platforms': ['Cloud Platforms'],
'CRM': ['CRM'], // Add if needed
'E-commerce': ['E-commerce'] // Add if needed
};
Start the dev server:
npm run dev
Visit your page:
http://localhost:4321/integrations/your-new-integration
Check that all sections render correctly
Test navigation from the hub page
Verify breadcrumbs and CTAs work
All integration pages use the custom IntegrationsLayout.astro located at /src/layouts/IntegrationsLayout.astro.
interface Props {
title: string; // Integration name (e.g., "QuickBooks Online")
description: string; // SEO description and hero subtitle
integrationLogo?: ImageMetadata; // Logo placeholder for the integration
integrationCategory?: string; // Category badge (Financial Software, CRM, etc.)
stats?: StatItem[]; // Impact statistics
challenges?: ChallengeItem[]; // Manual integration challenges
capabilities?: CapabilityItem[]; // Integration features
connectedSystems?: SystemItem[]; // What it connects to
caseStudies?: CaseStudyItem[]; // Success stories
testimonials?: TestimonialItem[]; // Client testimonials
faqs?: FAQItem[]; // Frequently asked questions
ctaTitle?: string; // CTA section title
ctaDescription?: string; // CTA section description
ctaButtonText?: string; // CTA button text
ctaButtonLink?: string; // CTA button link
}
Each integration page should:
/integrations/quickbooks not /integrations/qboIntegration pages are integrated into:
Main Navigation (Desktop & Mobile):
Footer:
Breadcrumbs:
The integrations-template.astro file is excluded from:
excludeFromSearch={true} prop (if implemented in Layout)netlify.toml:
[[redirects]]
from = "/integrations/integrations-template"
to = "/404"
status = 404
force = true
Current categories:
When creating integration pages, focus on:
For each integration page, target these keyword patterns:
Integration pages use images from /src/lib/images.ts:
import { caseStudyImages, testimonialHeadshots } from '../../lib/images';
// Use in your page:
image: caseStudyImages.manufacturing
image: testimonialHeadshots.kevin
Plan to add integration logos:
/src/assets/integrations/ directoryquickbooks-logo.png)/src/lib/images.tsintegrationLogo propPotential improvements:
Regular tasks:
Track and potentially create dedicated pages for popular combinations:
For questions about the Integrations hub:
/src/layouts/IntegrationsLayout.astroLast Updated: November 2025 Maintainer: DigitalStaff Development Team