Custom Launcher

<!-- Element with ID selector -->
<button id="cello-launcher" style="position: relative;">
  Invite Friends
</button>

<!-- Element with class selector -->
<button class="cello-custom-launcher" style="position: relative;">
  Share & Earn
</button>

<!-- Element with attribute selector -->
<button data-cello-launcher="true" style="position: relative;">
  Refer Now
</button>

<template>
  <!-- Element always rendered, visibility controlled by CSS -->
  <button 
    id="cello-launcher"
    :style="{ 
      position: 'relative',
      display: celloInitialized ? 'block' : 'none' 
    }"
  >
    Invite Friends
  </button>
</template>

<script>
export default {
  data() {
    return {
      celloInitialized: false
    }
  },
  mounted() {
    // Element already exists in DOM
    this.initializeCello().then(() => {
      this.celloInitialized = true;
    });
  }
}
</script>

// ❌ WRONG: Element created after Cello initialization
@Component({
  selector: 'app-my-component',
  template: `
    <button *ngIf="celloReady" id="cello-launcher">
      Invite
    </button> <!-- Too late! -->
  `
})
export class MyComponent implements OnInit {
  celloReady = false;
  
  ngOnInit() {
    this.initializeCello();
    this.celloReady = true; // Button appears after Cello init
  }
}

// ✅ CORRECT: Element exists before Cello initialization
@Component({
  selector: 'app-my-component',
  template: `
    <button 
      id="cello-launcher"
      [style.position]="'relative'"
      [style.display]="celloReady ? 'block' : 'none'"
    >
      Invite Friends
    </button>
  `
})
export class MyComponent implements OnInit {
  celloReady = false;
  
  async ngOnInit() {
    // Element already exists in DOM (hidden)
    await this.initializeCello();
    this.celloReady = true; // Now show the button
  }
  
  async initializeCello() {
    // Initialize Cello here
    window.cello = window.cello || { cmd: [] };
    
    window.cello.cmd.push(async (cello) => {
      try {
        await cello.boot({
          productId: "YOUR_PRODUCT_ID",
          token: "YOUR_JWT_TOKEN",
          // ... other configuration
        });
        console.log('Cello initialized successfully');
      } catch (error) {
        console.error('Failed to initialize Cello:', error);
      }
    });
  }
}