Scholarix - ODOO Trial Widget
Scholarix - ODOO Trial Widget
/**
* Scholarix Global - Free Trial Widget
* Embeddable signup form for website integration
* Usage:
*/
(function() {
'use strict';
// Prevent multiple instances
if (window.ScholarixWidget) {
console.warn('Scholarix Widget already loaded');
return;
}
const styles = `
.scholarix-widget-wrapper {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 999999;
max-width: 420px;
width: calc(100vw - 40px);
}
.scholarix-widget-trigger {
position: fixed;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
background: linear-gradient(135deg, #2B5F9E 0%, #4A90E2 50%, #00D4FF 100%);
border: none;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 4px 20px rgba(0, 212, 255, 0.4);
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: #ffffff;
z-index: 999998;
animation: pulse 2s infinite;
}
.scholarix-widget-trigger:hover {
transform: scale(1.1);
box-shadow: 0 6px 30px rgba(0, 212, 255, 0.6);
}
@keyframes pulse {
0%, 100% {
box-shadow: 0 4px 20px rgba(0, 212, 255, 0.4);
}
50% {
box-shadow: 0 4px 30px rgba(0, 212, 255, 0.8);
}
}
.scholarix-widget-card {
background: linear-gradient(165deg, #0c1e3d 0%, #1e3a8a 100%);
border: 2px solid #4fc3f7;
border-radius: 24px;
padding: 40px 32px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
color: #ffffff;
position: relative;
transform-origin: bottom right;
animation: slideIn 0.4s ease;
display: none;
}
.scholarix-widget-card.open {
display: block;
}
@keyframes slideIn {
from {
opacity: 0;
transform: scale(0.8) translateY(20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.scholarix-widget-close {
position: absolute;
top: 16px;
right: 16px;
background: transparent;
border: none;
color: #4fc3f7;
font-size: 24px;
cursor: pointer;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.2s ease;
}
.scholarix-widget-close:hover {
background: rgba(79, 195, 247, 0.2);
transform: rotate(90deg);
}
.scholarix-widget-header {
text-align: center;
margin-bottom: 28px;
}
.scholarix-widget-icon {
width: 120px;
height: 120px;
margin: 0 auto 20px;
background: linear-gradient(135deg, rgba(43, 95, 158, 0.3) 0%, rgba(0, 212, 255, 0.3) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid rgba(79, 195, 247, 0.5);
box-shadow: 0 0 30px rgba(79, 195, 247, 0.3);
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.scholarix-widget-icon img {
width: 80px;
height: 80px;
object-fit: contain;
}
.scholarix-widget-title {
font-size: 24px;
font-weight: 700;
color: #4fc3f7;
margin: 0 0 8px 0;
text-shadow: 0 0 10px rgba(79, 195, 247, 0.5);
}
.scholarix-widget-subtitle {
font-size: 14px;
color: #e8f4fd;
opacity: 0.9;
margin: 0;
line-height: 1.5;
}
.scholarix-widget-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.scholarix-widget-input-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.scholarix-widget-label {
font-size: 13px;
font-weight: 600;
color: #4fc3f7;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.scholarix-widget-input,
.scholarix-widget-textarea {
width: 100%;
padding: 14px 16px;
background: rgba(12, 30, 61, 0.6);
border: 1.5px solid rgba(79, 195, 247, 0.3);
border-radius: 12px;
color: #ffffff;
font-size: 15px;
font-family: inherit;
transition: all 0.3s ease;
outline: none;
}
.scholarix-widget-input:focus,
.scholarix-widget-textarea:focus {
border-color: #4fc3f7;
background: rgba(12, 30, 61, 0.8);
box-shadow: 0 0 15px rgba(79, 195, 247, 0.3);
}
.scholarix-widget-input::placeholder,
.scholarix-widget-textarea::placeholder {
color: rgba(232, 244, 253, 0.5);
}
.scholarix-widget-textarea {
resize: vertical;
min-height: 80px;
font-family: inherit;
}
.scholarix-widget-submit {
width: 100%;
padding: 16px 24px;
background: linear-gradient(135deg, #2B5F9E 0%, #4A90E2 50%, #00D4FF 100%);
border: none;
border-radius: 12px;
color: #ffffff;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 8px;
}
.scholarix-widget-submit:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(0, 212, 255, 0.5);
}
.scholarix-widget-submit:active:not(:disabled) {
transform: translateY(0);
}
.scholarix-widget-submit:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.scholarix-widget-footer {
margin-top: 16px;
text-align: center;
font-size: 12px;
color: rgba(232, 244, 253, 0.7);
line-height: 1.4;
}
.scholarix-widget-footer a {
color: #4fc3f7;
text-decoration: none;
border-bottom: 1px solid rgba(79, 195, 247, 0.3);
transition: all 0.2s ease;
}
.scholarix-widget-footer a:hover {
color: #7dd3fc;
border-bottom-color: #7dd3fc;
}
.scholarix-widget-status {
padding: 16px;
font-size: 14px;
color: #ffffff;
background: rgba(12, 30, 61, 0.6);
backdrop-filter: blur(10px);
border: 1.5px solid rgba(79, 195, 247, 0.4);
border-radius: 12px;
text-align: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
margin-top: 16px;
line-height: 1.5;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.scholarix-widget-status.success {
background: linear-gradient(165deg, rgba(6, 78, 59, 0.6) 0%, rgba(6, 95, 70, 0.6) 100%);
border-color: rgba(16, 185, 129, 0.5);
color: #d1fae5;
}
.scholarix-widget-status.error {
background: linear-gradient(165deg, rgba(127, 29, 29, 0.6) 0%, rgba(153, 27, 27, 0.6) 100%);
border-color: rgba(239, 68, 68, 0.5);
color: #fecaca;
}
.scholarix-widget-loading {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid rgba(79, 195, 247, 0.3);
border-top-color: #4fc3f7;
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin-right: 8px;
vertical-align: middle;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@media (max-width: 480px) {
.scholarix-widget-wrapper {
bottom: 10px;
right: 10px;
left: 10px;
max-width: none;
width: auto;
}
.scholarix-widget-trigger {
bottom: 10px;
right: 10px;
width: 56px;
height: 56px;
font-size: 24px;
}
.scholarix-widget-card {
padding: 32px 24px;
border-radius: 20px;
}
.scholarix-widget-icon {
width: 100px;
height: 100px;
}
.scholarix-widget-icon img {
width: 70px;
height: 70px;
}
.scholarix-widget-title {
font-size: 20px;
}
.scholarix-widget-subtitle {
font-size: 13px;
}
.scholarix-widget-submit {
padding: 14px 18px;
font-size: 15px;
}
}
`;
const html = `
`;
// Inject styles
const styleSheet = document.createElement('style');
styleSheet.textContent = styles;
document.head.appendChild(styleSheet);
// Inject HTML
document.addEventListener('DOMContentLoaded', function() {
document.body.insertAdjacentHTML('beforeend', html);
initWidget();
});
// If DOM already loaded
if (document.readyState === 'complete' || document.readyState === 'interactive') {
setTimeout(function() {
document.body.insertAdjacentHTML('beforeend', html);
initWidget();
}, 1);
}
function initWidget() {
const trigger = document.getElementById('scholarixTrigger');
const card = document.getElementById('scholarixCard');
const closeBtn = document.getElementById('scholarixClose');
const form = document.getElementById('scholarixForm');
const statusDiv = document.getElementById('scholarixStatus');
const submitBtn = document.getElementById('scholarixSubmit');
const submitText = document.getElementById('scholarixSubmitText');
if (!trigger || !card) {
console.error('Scholarix Widget: Required elements not found');
return;
}
// Toggle widget
trigger.addEventListener('click', function() {
const isOpen = card.classList.contains('open');
if (isOpen) {
closeWidget();
} else {
openWidget();
}
});
closeBtn.addEventListener('click', closeWidget);
// Close on outside click
document.addEventListener('click', function(e) {
if (card.classList.contains('open') &&
!card.contains(e.target) &&
!trigger.contains(e.target)) {
closeWidget();
}
});
// Close on Escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && card.classList.contains('open')) {
closeWidget();
}
});
function openWidget() {
card.classList.add('open');
trigger.style.display = 'none';
// Track widget open (optional analytics)
if (typeof gtag !== 'undefined') {
gtag('event', 'widget_opened', {
event_category: 'Scholarix Widget',
event_label: 'Free Trial Widget Opened'
});
}
}
function closeWidget() {
card.classList.remove('open');
trigger.style.display = 'flex';
// Track widget close (optional analytics)
if (typeof gtag !== 'undefined') {
gtag('event', 'widget_closed', {
event_category: 'Scholarix Widget',
event_label: 'Free Trial Widget Closed'
});
}
}
// Form submission
form.addEventListener('submit', async function(e) {
e.preventDefault();
const originalText = submitText.textContent;
submitText.innerHTML = 'Sending...';
submitBtn.disabled = true;
statusDiv.innerHTML = '';
statusDiv.className = '';
const formData = new FormData(form);
const data = Object.fromEntries(formData);
// Add metadata
data.source = 'widget';
data.page_url = window.location.href;
data.page_title = document.title;
data.timestamp = new Date().toISOString();
try {
// Replace with your actual endpoint
const response = await fetch('https://scholarixglobal.com/api/free-trial-signup', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify(data)
});
if (!response.ok) {
throw new Error('Network response was not ok');
}
const result = await response.json();
// Success
statusDiv.className = 'scholarix-widget-status success';
statusDiv.innerHTML = '✓ Success! Check your email to activate your free trial.';
form.reset();
// Track conversion (optional analytics)
if (typeof gtag !== 'undefined') {
gtag('event', 'conversion', {
send_to: 'AW-XXXXXXXXX/XXXXXXXXXXXXXX',
event_category: 'Scholarix Widget',
event_label: 'Free Trial Signup',
value: 1.0
});
}
// Auto-close after success
setTimeout(function() {
closeWidget();
statusDiv.innerHTML = '';
statusDiv.className = '';
}, 5000);
} catch (error) {
console.error('Scholarix Widget Error:', error);
statusDiv.className = 'scholarix-widget-status error';
statusDiv.innerHTML = '✗ Something went wrong. Please try again or email us at [email protected]';
} finally {
submitText.textContent = originalText;
submitBtn.disabled = false;
}
});
}
// Public API
window.ScholarixWidget = {
version: '1.0.0',
open: function() {
const card = document.getElementById('scholarixCard');
const trigger = document.getElementById('scholarixTrigger');
if (card && trigger) {
card.classList.add('open');
trigger.style.display = 'none';
}
},
close: function() {
const card = document.getElementById('scholarixCard');
const trigger = document.getElementById('scholarixTrigger');
if (card && trigger) {
card.classList.remove('open');
trigger.style.display = 'flex';
}
},
toggle: function() {
const card = document.getElementById('scholarixCard');
if (card) {
if (card.classList.contains('open')) {
this.close();
} else {
this.open();
}
}
}
};
console.log('Scholarix Free Trial Widget v1.0.0 loaded successfully');
})();
