BA Kontaktslider | Demo und Dokumentation
Contents
#Demos #Hash-Verlinkung #Events #Callbacks #Hooks #URL-Parameter
1. Demos
2. Hash-Verlinkung
Sample
href="#callback"
Öffne Callback
Öffne Appointment
3. Events
Open:
Sample
BacsView.open('cb');
Öffne Kontaktslider
Öffne Callback
Öffne Appointment
Close:
Sample
BacsView.close();
Schließe Kontaktslider
Reset/Clear:
Sample
BacsView.clear('cb');
Reset Callback
Reset Appointment
Submit:
Sample
BacsView.submit('cb', 'create');
Submit Callback Submit Appointment
Submit Appointment
Submit Appointment
4. Callbacks
OnOpen:
Sample
BacsView.handler('cb', '{"event": "OnOpen"}',
function () { console.log('callback "OnOpen Callback" fired') }
);
OnOpen Callback
OnOpen Appointment
OnClose:
Sample
BacsView.handler('cb', '{"event": "OnClose"}',
function () { console.log('callback "OnClose Callback" fired') }
);
OnClose Callback
OnClose Appointment
BeforeSubmit:
Sample
BacsView.handler('cb', '{"event": "BeforeSubmit", "endpoint": "create"}',
function () { console.log('callback "BeforeSubmit /create Callback" fired') }
);
BeforeSubmit Callback BeforeSubmit Appointment
BeforeSubmit Appointment
BeforeSubmit Appointment
BeforeSubmit Appointment
AfterSubmit:
Sample
BacsView.handler('cb', '{"event": "AfterSubmit", "endpoint": "create"}',
function () { console.log('callback "AfterSubmit /create Callback" fired') }
);
AfterSubmit Callback AfterSubmit Appointment
AfterSubmit Appointment
AfterSubmit Appointment
AfterSubmit Appointment
OnError:
Sample
BacsView.handler('cb', '{"event": "OnError", "endpoint": "create"}',
function () { console.log('callback "OnError /create Callback" fired') }
);
OnError Callback OnError Appointment
OnError Appointment
OnError Appointment
OnError Appointment
OnSuccess:
Sample
BacsView.handler('cb', '{"event": "OnSuccess", "endpoint": "create"}',
function () { console.log('callback "OnSuccess /create Callback" fired') }
);
OnSuccess Callback OnSuccess Appointment
OnSuccess Appointment
OnSuccess Appointment
OnSuccess Appointment
5. Hooks
Pressign values on page load:
Sample
window.BacsInit = {
cb: [
{ name: "interaction.category", defaultvalue: "Bau-/Wohnfinanzierung, Förderungen" },
{ name: "interaction.salutation", defaultvalue: "Frau" },
{ name: "interaction.firstName", defaultvalue: "Maxime" },
{ name: "interaction.lastName", defaultvalue: "Musterfrau" },
{
name: "interaction.dateOfBirth",
elementSettings: {
dateSettings: {
day: {
defaultvalue: "23"
},
month: {
defaultvalue: "6"
},
year: {
defaultvalue: "1980"
}
}
}
},
{
name: "interaction.phoneNumber",
elementSettings: {
phoneSettings: {
countrycode1: {
defaultvalue: "+49"
},
countrycode2: {
defaultvalue: ""
},
number: {
defaultvalue: "123456789"
}
}
}
},
{ name: "interaction.street", defaultvalue: "Teststraße" },
{ name: "interaction.houseNumber", defaultvalue: "1" },
{ name: "interaction.postalCode", defaultvalue: "1010" },
{ name: "interaction.city", defaultvalue: "Teststadt" },
{ name: "contactDateTime", defaultvalue: "01val" },
{ name: "interaction.hint", defaultvalue: "Lorem Ipsum Dolor Sit Amet" },
{ name: "Disclaimer", defaultvalue: "1" }
]
};
Pressign form values
Preassign form values
Dynamically assign values after page load:
Sample
BacsRender.setProperties('cb', [
{ name: "interaction.category", defaultvalue: "Bau-/Wohnfinanzierung, Förderungen" },
{ name: "interaction.firstName", defaultvalue: "Maxime" },
{
name: "interaction.dateOfBirth",
elementSettings: {
dateSettings: {
day: {
defaultvalue: "23"
},
month: {
defaultvalue: "6"
},
year: {
defaultvalue: "1980"
}
}
}
},
{
name: "interaction.phoneNumber",
elementSettings: {
phoneSettings: {
countrycode1: {
defaultvalue: "+49"
},
countrycode2: {
defaultvalue: ""
},
number: {
defaultvalue: "123456789"
}
}
}
},
{
name: "contactDateTime",
defaultvalue: "02val",
elementSettings: {
datepickerSettings: {
defaultvalue: "2025-11-10",
hour: {
defaultvalue: "08"
},
minute: {
defaultvalue: "30"
}
}
}
},
{ name: "interaction.hint", defaultvalue: "Lorem Ipsum Dolor Sit Amet" },
{ name: "Disclaimer", defaultvalue: "1" }
]);
Dynamically assign form values
Dynamically assign form values
Assign values after callback:
Sample
BacsView.handler('ap', '{"event": "OnSuccess", "endpoint": "Occasions"}', function() {
BacsRender.setProperties('ap', [
{ name: "Occasion", defaultvalue: "9" }
]);
});
Assign form values after callback
6. URL-Parameter
Pressign values via URL Parameter (Callback & Appointment):
Sample
href="?interaction.category=Bau-/Wohnfinanzierung, Förderungen&interaction.salutation=Frau&interaction.firstName=Maxime&interaction.lastName=Musterfrau&interaction.dateOfBirth=&interaction.street=Teststraße&interaction.phoneNumber=&interaction.houseNumber=1&interaction.postalCode=1010&interaction.city=Teststadt&contactDateTime=&interaction.hint=Lorem Ipsum Dolor Sit Amet&Disclaimer=1"
Generate URL parameter
Use generated URL parameter
IP: 216.73.216.211
