BA Kontaktslider | Demo und Dokumentation

#Demos
#Hash-Verlinkung
#Events
#Callbacks
#Hooks
#URL-Parameter

1. Demos

2. Hash-Verlinkung

Sample

    href="#callback"

3. Events

Open:

Sample

    BacsView.open('cb');

Close:

Sample

    BacsView.close();

Reset/Clear:

Sample

    BacsView.clear('cb');

Submit:

Sample

    BacsView.submit('cb', 'create');

4. Callbacks

OnOpen:

Sample

    BacsView.handler('cb', '{"event": "OnOpen"}',
        function () { console.log('callback "OnOpen Callback" fired') }
    );

OnClose:

Sample

    BacsView.handler('cb', '{"event": "OnClose"}',
        function () { console.log('callback "OnClose Callback" fired') }
    );

BeforeSubmit:

Sample

    BacsView.handler('cb', '{"event": "BeforeSubmit", "endpoint": "create"}',
        function () { console.log('callback "BeforeSubmit /create Callback" fired') }
    );

AfterSubmit:

Sample

    BacsView.handler('cb', '{"event": "AfterSubmit", "endpoint": "create"}',
        function () { console.log('callback "AfterSubmit /create Callback" fired') }
    );

OnError:

Sample

    BacsView.handler('cb', '{"event": "OnError", "endpoint": "create"}',
        function () { console.log('callback "OnError /create Callback" fired') }
    );

OnSuccess:

Sample

    BacsView.handler('cb', '{"event": "OnSuccess", "endpoint": "create"}',
        function () { console.log('callback "OnSuccess /create Callback" fired') }
    );

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" }
            ]
        };

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" }
    ]);

Assign values after callback:

Sample
    BacsView.handler('ap', '{"event": "OnSuccess", "endpoint": "Occasions"}', function() {
        BacsRender.setProperties('ap', [
            { name: "Occasion", defaultvalue: "9" }
        ]);
    });

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