Skip to main content

Overview

This guide helps you migrate from popular chat widgets to LuaPop with minimal disruption.

From Intercom

Before (Intercom)

<script>
  window.intercomSettings = {
    app_id: "your_app_id",
    name: "John Doe",
    email: "[email protected]"
  };
</script>
<script>
  (function(){var w=window;var ic=w.Intercom;...})();
</script>

After (LuaPop)

<script src="https://lua-ai-global.github.io/lua-pop/lua-pop.umd.js"></script>
<script>
  window.LuaPop.init({
    agentId: "your-agent-id",
    sessionId: "john-doe-123",
    position: "bottom-right",
    welcomeMessage: "Hi John! 👋 How can I help you today?",
    runtimeContext: "user:[email protected]"
  });
</script>

Migration Benefits

  • Simpler Setup - Single script tag vs complex initialization
  • AI-Powered - Intelligent responses vs human-only support
  • 24/7 Availability - AI never sleeps
  • Lower Cost - Pay per usage vs monthly fees

From Zendesk Chat

Before (Zendesk)

<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=your-key"></script>
<script>
  zE('webWidget', 'updateSettings', {
    webWidget: {
      color: { theme: '#78a300' }
    }
  });
</script>

After (LuaPop)

<script src="https://lua-ai-global.github.io/lua-pop/lua-pop.umd.js"></script>
<script>
  window.LuaPop.init({
    agentId: "your-agent-id",
    position: "bottom-right",
    buttonColor: "#78a300"
  });
</script>

From Drift

Before (Drift)

drift.load('your-drift-id');

After (LuaPop)

<script src="https://lua-ai-global.github.io/lua-pop/lua-pop.umd.js"></script>
<script>
  window.LuaPop.init({
    agentId: "your-agent-id",
    position: "bottom-right",
    buttonText: "👋 Let's chat",
    buttonColor: "#2d88ff",
    voiceModeEnabled: true
  });
</script>

From Tawk.to

Before (Tawk.to)

var Tawk_API = Tawk_API || {};
(function(){
  var s1=document.createElement("script");
  s1.src='https://embed.tawk.to/your-tawk-id/default';
  document.head.appendChild(s1);
})();

After (LuaPop)

<script src="https://lua-ai-global.github.io/lua-pop/lua-pop.umd.js"></script>
<script>
  window.LuaPop.init({
    agentId: "your-agent-id",
    position: "bottom-right",
    buttonColor: "#00b894"
  });
</script>

Configuration Mapping

FeatureIntercomZendeskDriftLuaPop
IDapp_idkeydrift-idagentId
PositionNot configurablepositionNot configurableposition
Colorcolor_overridecolor.themetheme.primaryColorbuttonColor
Button TextNot availableCustom CSSteaser.textbuttonText
Welcome Messagecustom_launcher_selectorLimitedteaser.textwelcomeMessage
User IDuser_idCustomuserIdsessionId

Event Migration

From Intercom Events

Intercom('onShow', function() {
  console.log('Widget opened');
});

From Zendesk Events

zE('webWidget:on', 'open', function() {
  console.log('Opened');
});

Gradual Migration

Roll out LuaPop to a percentage of users:
class GradualMigration {
  constructor() {
    this.migrationPercentage = 25; // Start with 25%
    this.shouldUseLuaPop = this.inMigrationGroup();
    
    if (this.shouldUseLuaPop) {
      this.initLuaPop();
    } else {
      this.initLegacyChat();
    }
  }

  inMigrationGroup() {
    const userId = this.getUserId();
    const hash = this.simpleHash(userId);
    return (hash % 100) < this.migrationPercentage;
  }

  simpleHash(str) {
    let hash = 0;
    for (let i = 0; i < str.length; i++) {
      hash = ((hash << 5) - hash) + str.charCodeAt(i);
    }
    return Math.abs(hash);
  }

  getUserId() {
    return localStorage.getItem('user_id') || 'anonymous';
  }

  initLuaPop() {
    window.LuaPop.init({
      agentId: "migration-agent",
      position: "bottom-right"
    });
  }

  initLegacyChat() {
    // Your existing chat solution
  }
}

new GradualMigration();

Migration Checklist

1

Pre-Migration

  • Audit current chat setup
  • Document custom features
  • Plan agent configuration
  • Test LuaPop in staging
2

During Migration

  • Start with 10-25% of users
  • Monitor performance metrics
  • Collect user feedback
  • Compare analytics data
3

Post-Migration

  • Remove legacy chat code
  • Update documentation
  • Train support team
  • Optimize configuration

Next Steps