Skip to main content
Get up and running with Stringboot in under 10 minutes. This guide will walk you through adding dynamic string management to your web application.

​
Prerequisites

  • Node.js 16+ and npm/yarn
  • A Stringboot API token(Get one here)
  • Basic knowledge of JavaScript/TypeScript

​
Step 1: Install Package

# npm
npm install @stringboot/web-sdk

# yarn
yarn add @stringboot/web-sdk

# pnpm
pnpm add @stringboot/web-sdk

​
Step 2: Initialize SDK

import StringBoot from '@stringboot/web-sdk';

// Initialize once at app startup
await StringBoot.initialize({
  apiToken: 'YOUR_API_TOKEN_HERE',
  baseUrl: 'https://api.stringboot.com',  // Optional
  defaultLanguage: 'en',                    // Optional - defaults to browser language
  debug: true                               // Optional - enable console logs
});

console.log('✅ Stringboot initialized!');

​
Step 3: Use Strings in Your App

// Get a single string
const welcomeText = await StringBoot.get('welcome_message');
document.getElementById('title').textContent = welcomeText;

// Get string with specific language
const spanishText = await StringBoot.get('welcome_message', 'es');

// Watch for updates (reactive)
StringBoot.watch('welcome_message', (newValue) => {
  document.getElementById('title').textContent = newValue;
});

​
Step 4: Using FAQs (Optional)

The FAQ Provider lets you deliver dynamic, multilingual FAQ content with offline-first caching.

​
Initialize FAQ Provider

import StringBoot from '@stringboot/web-sdk';

// After initializing StringBoot, initialize FAQ Provider
await StringBoot.FAQ.initialize({
  apiToken: 'YOUR_API_TOKEN',
  baseUrl: 'https://api.stringboot.com',
  cacheSize: 200  // Optional: default is 200
});

​
Fetch FAQs

// Get all FAQs regardless of tag
const allFAQs = await StringBoot.FAQ.getFAQs({
  tag: 'all',
  lang: 'en',
  allowNetworkFetch: true
});

// Get FAQs by specific tag
const paymentFAQs = await StringBoot.FAQ.getFAQs({
  tag: 'payments',
  lang: 'en',
  allowNetworkFetch: true
});

// Get FAQs with sub-tag filtering (2-level filtering)
const refundFAQs = await StringBoot.FAQ.getFAQs({
  tag: 'payments',
  subTags: ['refunds', 'disputes'],
  lang: 'en',
  allowNetworkFetch: true
});

​
React FAQ Integration

import { useState, useEffect } from 'react';
import StringBoot from '@stringboot/web-sdk';

function FAQSection() {
  const [faqs, setFaqs] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function loadFAQs() {
      // Initialize FAQ Provider first
      await StringBoot.FAQ.initialize({
        apiToken: 'YOUR_API_TOKEN',
        baseUrl: 'https://api.stringboot.com'
      });

      // Fetch FAQs
      const fetchedFAQs = await StringBoot.FAQ.getFAQs({
        tag: 'all',
        lang: 'en',
        allowNetworkFetch: true
      });

      setFaqs(fetchedFAQs);
      setLoading(false);
    }

    loadFAQs();
  }, []);

  if (loading) return <div>Loading FAQs...</div>;

  return (
    <div>
      {faqs.map(faq => (
        <div key={faq.id}>
          <h3>{faq.question}</h3>
          <p dangerouslySetInnerHTML={{ __html: faq.answer }} />
          <span className="tag">{faq.tag}</span>
        </div>
      ))}
    </div>
  );
}
Key FAQ Features:
  • 2-level filtering: Mandatory tag + optional sub-tags
  • “All” tag: Use tag: 'all' to fetch entire catalog
  • Offline-first: Memory → IndexedDB → Network
  • Multi-language: Automatic fallback to English
  • Delta sync: Only downloads changed FAQs

​
Step 5: Test It Out!

  1. Run your development server: 
    npm run dev
  2. Open browser console - look for Stringboot logs: 
    [StringBoot] Initializing...
[StringBoot] ✅ Sync complete: 42 strings loaded
[StringBoot] Current language: en
  3. Verify strings appear in your UI
  4. Test language switching (if implemented)

​
Next Steps

React Integration

Deep dive into React hooks and components.

Vue Integration

Learn about Vue composition API support.

Advanced Usage

Performance, A/B Testing, and more.

Troubleshooting

Resolve common integration issues.