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

Template Id: {{ template.identifier }}

Variants : {{ variants }}

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. 

 

 

 

 

 

 

 

Swift
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)
Obj-C
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];
Android
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();
{} JSON