Sample Code Editor
Design your own scannable codes then use your app and APIs to generate them. For optimal scanning, remember to maintain good contrast between the Code and the Background.
Choose your Template
Customise your Code
Colors
Test Your Code
The Quikkly SDKs ship with all of the above templates included in a blueprints file. The default Quikkly SDK solution encodes integers. The example above also shows URLs working, but this requires that the app developer implement a mapping functionality themselves from the encoded integer to the desired URL.
let skin = ScannableSkin()
skin.backgroundColor = "{{ skin.backgroundColor }}"
skin.maskColor = "{{ skin.maskColor }}"
skin.dotColor = "{{ skin.dataColor }}"
skin.borderColor = "{{ skin.borderColor }}"
skin.overlayColor = "{{ skin.overlayColor }}"
skin.imageUri = "{{:: skin.imageUri }}"
skin.imageFit = .{{ imageFitName | lowercase }}
skin.logoUri = "{{:: skin.logoUri }}"
skin.logoFit = .{{ logoFitName | lowercase }}
let scannable = Scannable(withValue: {{ dataIsNaN ? 123456789 : codeData }}, template: "{{ template.identifier }}", skin: skin)
QKScannableSkin *skin = [[QKScannableSkin alloc] init];
skin.backgroundColor = @"{{ skin.backgroundColor }}";
skin.maskColor = @"{{ skin.maskColor }}";
skin.dotColor = @"{{ skin.dataColor }}";
skin.borderColor = @"{{ skin.borderColor }}";
skin.overlayColor = @"{{ skin.overlayColor }}";
skin.imageUri = @"{{:: skin.imageUri }}";
skin.imageFit = QKScannableSkinImageFit{{ imageFitName }};
skin.logoUri = @"{{:: skin.logoUri }}";
skin.logoFit = QKScannableSkinImageFit{{ logoFitName }};
QKScannable *scannable = [[QKScannable alloc] initWithValue:{{ dataIsNaN ? 123456789 : codeData }} template:@"{{ template.identifier }}" skin:skin];
Skin skin = new Skin();
skin.setBackgroundColor("{{ skin.backgroundColor }}");
skin.setBorderColour("{{ skin.borderColor }}");
skin.setMaskColour("{{ skin.maskColor }}");
skin.setDataColor("{{ skin.dataColor }}");
skin.setOverlayColor("{{ skin.overlayColor }}");
skin.setImageURL("{{:: skin.imageUri }}");
skin.setImageFit("{{ imageFitName }}");
skin.setLogoURL("{{:: skin.logoUri }}");
skin.setLogoFit("{{ logoFitName }}");
Scanner mScanner = new Scanner();