Skip to main content

Import & Export

XBuilder allows you to export your popup configurations as JSON and import them later or on other projects. This is useful for backups, sharing templates, and moving popups between environments.

Exporting Popups​

How to Export​

  1. Click Export in the header
  2. Choose export format
  3. Download or copy the file

Export Formats​

FormatUse Case
JSONFull configuration (recommended)
HTMLStandalone HTML output

What's Exported​

The JSON export includes:

  • All elements and content
  • Styling settings
  • Layout configuration
  • Trigger settings
  • Display frequency
  • All customizations

Export JSON Structure​

Basic Structure​

{
  "popup": {
    "position": "center",
    "width": "500px",
    "backgroundColor": "#ffffff",
    "borderRadius": "16px",
    "animation": "fadeIn",
    "trigger": "onload",
    "elements": [...]
  },
  "meta": {
    "version": "1.0",
    "exportedAt": "2024-01-15T10:30:00Z"
  }
}

Elements Array​

"elements": [
  {
    "id": "heading-1",
    "type": "heading",
    "content": {
      "text": "Welcome!",
      "level": "h2"
    },
    "style": {
      "typography": {
        "fontSize": "32px",
        "fontWeight": "700"
      }
    }
  },
  // More elements...
]

Importing Popups​

How to Import​

  1. Click Import in the header (or Library → Import)
  2. Select JSON file or paste JSON
  3. Click Import
  4. Review loaded popup

Import Options​

OptionEffect
ReplaceReplaces current popup
MergeAdds to current elements

What's Imported​

When importing:

  • All settings are applied
  • Elements are recreated
  • Styles are restored
  • Triggers are configured

Copy/Paste Templates​

Paste JSON Directly​

You can paste JSON templates directly:

  1. Copy JSON configuration
  2. Click on canvas (ensure focus)
  3. Press Ctrl+V / Cmd+V
  4. Confirm import

Canvas Paste​

When pasting in the canvas area:

  • XBuilder detects JSON format
  • Prompts to import as template
  • Replaces current content

Backup & Restore​

Creating Backups​

  1. Export your popup as JSON
  2. Save with descriptive filename: 
    popup-newsletter-2024-01-15.json
  3. Store in safe location

Restoring from Backup​

  1. Open XBuilder
  2. Import the backup JSON
  3. Verify content loaded correctly

Backup Schedule​

Recommended:

  • Before major changes
  • Weekly for active projects
  • After completing designs

Sharing Templates​

Sharing with Team​

  1. Export popup as JSON
  2. Share file via:
    • Email
    • Cloud storage
    • Version control

Template Library​

Build your own library:

/templates
  /newsletters
    - welcome-popup.json
    - exit-intent.json
  /promotions
    - flash-sale.json
    - discount-offer.json

Version Control​

Git Integration​

Store templates in git:

git add templates/
git commit -m "Add newsletter popup template"

Change Tracking​

JSON files work well with git:

  • See changes in diffs
  • Track modifications
  • Revert if needed

Migration​

Between Environments​

Moving popup from development to production:

  1. Export from dev environment
  2. Import to production
  3. Update any environment-specific settings

Between Projects​

Reuse popups across projects:

  1. Export proven templates
  2. Import to new project
  3. Customize for new context

Troubleshooting​

Import Failed​

Check:

  • JSON is valid (use JSON validator)
  • File not corrupted
  • Correct file selected

Missing Elements​

Check:

  • Export was complete
  • No JSON truncation
  • Compatible XBuilder version

Styling Differences​

Possible causes:

  • Font not available
  • Browser differences
  • CSS conflicts

Validation Errors​

If JSON is invalid:

  1. Use online JSON validator
  2. Check for syntax errors
  3. Look for trailing commas
  4. Verify quotes are correct

Best Practices​

File Naming​

✓ popup-[name]-[date].json
✓ newsletter-signup-v2.json
✓ black-friday-2024.json

✗ popup.json
✗ test.json
✗ final-final-v3.json

Before Exporting​

  1. Test popup thoroughly
  2. Remove test/debug settings
  3. Verify all content is correct
  4. Check responsive behavior

Before Importing​

  1. Backup current work
  2. Verify JSON source
  3. Check compatibility
  4. Have rollback plan

JSON Editing​

Manual Editing​

You can edit exported JSON:

{
  "popup": {
    "backgroundColor": "#000000"  // Change this
  }
}

Caution:

  • Maintain valid JSON structure
  • Don't change IDs arbitrarily
  • Test after manual edits

Batch Updates​

For bulk changes:

  1. Export multiple popups
  2. Use script to modify JSON
  3. Import updated versions