<!DOCTYPE html>
<html>
<head>
<style>
.mellowtel-wrapper {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 40px;
border-radius: 12px;
margin: 20px;
}
.mellowtel-elements {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}
.element-container {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="mellowtel-wrapper">
<h2>Mellowtel Elements</h2>
<div class="mellowtel-elements">
<div class="element-container">
<div id="opt-in-container"></div>
</div>
<div class="element-container">
<div id="opt-out-container"></div>
</div>
<div class="element-container">
<div id="settings-container"></div>
</div>
</div>
</div>
<script>
import { MellowtelElements } from 'mellowtel-elements';
const mellowtel = new MellowtelElements('your-extension-id', 'your-config-key');
// Create elements with custom styling
mellowtel.createElement('opt-in-container', {
type: 'opt-in',
styles: {
backgroundColor: '#10B981',
textColor: '#FFFFFF',
radius: 12,
width: 180,
height: 45
}
});
mellowtel.createElement('opt-out-container', {
type: 'opt-out',
styles: {
backgroundColor: '#EF4444',
textColor: '#FFFFFF',
radius: 12,
width: 180,
height: 45
}
});
mellowtel.createElement('settings-container', {
type: 'settings',
styles: {
backgroundColor: '#3B82F6',
textColor: '#FFFFFF',
radius: 12,
width: 180,
height: 45
}
});
</script>
</body>
</html>