integration-ios.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="images/favicon.png">

    <title>Countly Code Generator</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>
<body>
    <div class="jumbotron top">
        <div class="container">
            <div id="logo">
                <span class="image"></span>
                <span class="text">Code Generator</span>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div style="overflow: auto">
                    <div class="btn-group" style="float: left">
                        <a href="integration.html" id="back" class="btn btn-default">&larr; Back</a>
                        <a href="events.html?sdk=ios" id="next" class="btn btn-default">Next: Create Event &rarr;</a>
                    </div>
                    <div id="buttons" class="btn-group" role="group" style="float: right">

                    </div>
                </div>
                <h2 class="text-center">Integrating Apple SDK (iOS, OSX, tvOS, WatchOS)</h2>
            </div>
        </div>
        <div class='section configuration'>
            <span class='label'>Provide configuration settings</span>
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <label for='server-url'>Server URL:</label>
                        <input type="url" class="form-control" id='server-url' placeholder="https://try.count.ly">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <label for="app_key">App Key:</label>
                        <input type="text" class="form-control" id="app_key"
                            placeholder="f399aa0a6305c2bd51d304ca666418ae8d93d9bc">
                    </div>
                </div>
            </div>
        </div>


        <div class='section platform radio'>
            <span class='label'>Choose which platform you want to use</span>
            <div class="row">
                <div class="col-md-12">
                    <label>
                        <input type="radio" name='platform' value='iOS' checked="checked"> iOS
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <label>
                        <input type="radio" name='platform' value='watchOS'> watchOS
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <label>
                        <input type="radio" name='platform' value='tvOS'> tvOS
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <label>
                        <input type="radio" name='platform' value='OSX'> OSX
                    </label>
                </div>
            </div>
        </div>

        <div class='section device_id radio'>
            <span class='label'>Choose a way to generate device ID</span>
            <div class="row" id="device_id_CLYSDKDefault">
                <div class="col-md-12">
                    <label>
                        <input type="radio" name='device_id' value='CLYSDKDefault' checked="checked"><span
                            id="device_id_sdk_default_text"> SDK Default (IDFV)</span>
                    </label>
                </div>
            </div>
            <div class="row" id="device_id_CLYIDFV">
                <div class="col-md-12">
                    <label>
                        <input type="radio" name='device_id' value='CLYIDFV'> Identifier for Advertising (IDFA)
                    </label>
                </div>
            </div>

            <div class="row" id="device_id_Custom">
                <div class="col-md-12">
                    <label>
                        <input type="radio" name='device_id' value='CLYCustom'> Custom
                        <input type="text" class="form-control" id="custom_devide_id" placeholder="uid1234@myapp"
                            disabled=true>
                    </label>
                </div>
            </div>
        </div>


        <div class='section features checkbox'>
            <span class='label'>Choose optional features you want to use</span>
            <div class="row" id="feature_CLYPushNotifications">
                <div class="col-md-12">
                    <label>
                        <input type="checkbox" class='feature' value='CLYPushNotifications'> Push Notifications
                    </label>
                </div>
            </div>
            <div class="row" id="feature_CLYCrashReporting">
                <div class="col-md-12">
                    <label>
                        <input type="checkbox" class='feature' value='CLYCrashReporting'> Crash Reporting
                    </label>
                </div>
            </div>
            <!--<div class="row" id="feature_CLYAPM">
                    <div class="col-md-12">
                        <label>
                            <input type="checkbox" class='feature' value='CLYAPM'> APM
                        </label>
                    </div>
                </div>-->
            <div class="row" id="feature_CLYAutoViewTracking">
                <div class="col-md-12">
                    <label>
                        <input type="checkbox" class='feature' value='CLYAutoViewTracking'> Auto View Tracking
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <p>&nbsp;</p>
                </div><!-- /.col-lg-6 -->
            </div><!-- /.row -->
            <div class="row">
                <div class="col-md-12">
                    <label>
                        <input type="checkbox" id="allfeatures"> I want all features
                    </label>
                </div><!-- /.col-lg-6 -->
            </div><!-- /.row -->
        </div>
        <div class='section advanced'>
            <span class='label'>
                <span id="dropdown-icon" style="display: inline-block;"></span>
                <span id="dropdown-icon-2" style="display: none;"></span>
                Advanced Configuration</span>
            <div class='advanced-list'>
                <fieldset>
                    <legend>General</legend>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Provide IP address of your user</label>
                                <input type="text" class="form-control" id='IP' placeholder="128.0.0.1" />
                            </div>
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Provide country code of your user (will try to determine from IP address if not
                                    provided)</label>
                                <input type="text" class="form-control" id='ISOCountryCode' placeholder="US" />
                            </div>
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Provide city of your user (will try to determine from IP address if not
                                    provided)</label>
                                <input type="text" class="form-control" id='city' placeholder="San Francisco" />
                            </div>
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Provide the secret salt. Must be same with the one provided on server to prevent
                                    changing request data</label>
                                <input type="text" class="form-control" id='secretSalt' placeholder="secret" />
                            </div>
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                </fieldset>
                <fieldset>
                    <legend>Limits</legend>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Provide maximum amount of queued requests to store if server is
                                    unresponsive</label>
                                <input type="text" class="form-control" id='storedRequestsLimit' placeholder="1000" />
                            </div>
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Send events when you reach this limit without waiting for next sync</label>
                                <input type="text" class="form-control" id='eventSendThreshold' placeholder="10" />
                            </div>
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Provide how often, in seconds, should a session be extended</label>
                                <input type="text" class="form-control" id='updateSessionPeriod' placeholder="60" />
                            </div>
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Provide how many custom crash logs should be allowed</label>
                                <input type="text" class="form-control" id='crashLogLimit' placeholder="100" />
                            </div>
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                </fieldset>
                <fieldset>
                    <legend>Other</legend>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Provide a name for the custom HTTP header field to be sent with every
                                    request</label>
                                <input type="text" class="form-control" id='customHeaderFieldName'
                                    placeholder="X-My-Custom-Field" />
                            </div>
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Provide a value for the custom HTTP header field to be sent with every
                                    request</label>
                                <input type="text" class="form-control" id='customHeaderFieldValue'
                                    placeholder="my_custom_value" />
                            </div>
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Provide comma separated list of certificates to pin</label>
                                <input type="text" class="form-control arr" id='pinnedCertificates'
                                    placeholder="mycertificate1.cer, mycertificate2.cer" />
                            </div>
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Provide the Star Rating dialog message</label>
                                <input type="text" class="form-control" id='starRatingMessage'
                                    placeholder="How would you rate the app?" />
                            </div>
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Show Star rating dialog after this amount of sessions</label>
                                <input type="text" class="form-control" id='starRatingSessionCount' placeholder="10" />
                            </div>
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                </fieldset>
                <fieldset>
                    <legend>Optional</legend>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>
                                    <input type="checkbox" id='starRatingDisableAskingForEachAppVersion' value='YES'>
                                    Disable Asking Star rating for each version
                                </label>
                            </div>
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>
                                    <input type="checkbox" id='enableDebug' value='YES'> Enable Debug logging
                                </label>
                            </div>
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>
                                    <input type="checkbox" id='isTestDevice' value='YES'> Enable test mode
                                </label>
                            </div>
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>
                                    <input type="checkbox" id='sendPushTokenAlways' value='YES'> Force sending tokens if
                                    user did not allow push notifications
                                </label>
                            </div>
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>
                                    <input type="checkbox" id='doNotShowAlertForNotifications' value='YES'> Disable
                                    automatically showing of message alerts for push notifications
                                </label>
                            </div>
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>
                                    <input type="checkbox" id='forceDeviceIDInitialization' value='YES'> Overwrite
                                    device id on initialization
                                </label>
                            </div>
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>
                                    <input type="checkbox" id='alwaysUsePOST' value='YES'> Force using POST only
                                </label>
                            </div>
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>
                                    <input type="checkbox" id='enableAppleWatch' value='YES'> Enable Apple Watch support
                                </label>
                            </div>
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>
                                    <input type="checkbox" id='manualSessionHandling' value='YES'> Handle sessions
                                    manually
                                </label>
                            </div>
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>
                                    <input type="checkbox" id='applyZeroIDFAFix' value='YES'> Apply Zero-IDFA fix
                                </label>
                            </div>
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>
                                    <input type="checkbox" id='enableAttribution' value='YES'> Enable Attribution
                                </label>
                            </div>
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>
                                    <input type="checkbox" id='requiresConsent' value='YES'> Require consents (for GDPR)
                                </label>
                            </div>
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                </fieldset>
            </div>
        </div>


        <div class="row">
            <div class="col-md-12">
                <p class='text-center'><button type="button" class="btn btn-success" id="generate">Generate
                        code</button></p>
            </div>
        </div>

        <footer>
            <p><a href='http://count.ly'>Count.ly</a></p>
        </footer>
    </div> <!-- /container -->

    <div class="modal fade" id="end-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Integrate <span class='integrate ios'>iOS</span><span
                            class='integrate tvos'>tvOS</span><span class='integrate osx'>OSX</span><span
                            class='integrate watchos'>WatchOS</span> SDK</h4>
                </div>
                <div class="modal-body">
                    <p>Insert this snippet to in your application delegate, or modify it to include provided code in
                        same methods</p>
                    <p id='push' class='well hidden'><a
                            href="http://resources.count.ly/docs/countly-sdk-for-ios-and-os-x#push-notifications"
                            target="_blank">More information on setting up push notifications on server</a></p>
                    <div class="tabbable"> <!-- Only required for left/right tabs -->
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#objc" data-toggle="tab">Objective C</a></li>
                            <li><a href="#swift" data-toggle="tab">Swift</a></li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="objc">
                                <p><textarea id='end-code-objc' class="no-translate code" readonly
                                        onclick="this.select();"></textarea></p>
                                <p class='text-center'>
                                    <button type="button" class="btn btn-success" id="copy"
                                        data-clipboard-target="#end-code-objc">Copy</button>&nbsp;
                                    <button type="button" class="btn btn-success" id="download">Download</button>&nbsp;
                                    <button type="button" class="btn btn-primary gotit">Close</button>
                                </p>
                            </div>
                            <div class="tab-pane" id="swift">
                                <p><textarea id='end-code-swift' class="no-translate code" readonly
                                        onclick="this.select();"></textarea></p>
                                <p class='text-center'>
                                    <button type="button" class="btn btn-success" id="copy"
                                        data-clipboard-target="#end-code-swift">Copy</button>&nbsp;
                                    <button type="button" class="btn btn-success"
                                        id="download-swift">Download</button>&nbsp;
                                    <button type="button" class="btn btn-primary gotit">Close</button>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap core JavaScript
        ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
    <script src="https://global.localizecdn.com/localize.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="js/ie10-viewport-bug-workaround.js"></script>
    <script src="js/sdks.js"></script>
    <script src="js/common.js"></script>
    <script src="js/Blob.js"></script>
    <script src="js/FileSaver.min.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script>
        $(document).ready(function () {
            new Clipboard('#copy');
            var sdk = sdks.ios;
            $("#buttons").append('<a href="' + sdk.docs + '" target="_blank" class="btn btn-default">Documentation</a>');
            $("#buttons").append('<a href="' + sdk.download + '" target="_blank" class="btn btn-default">Download</a>');
            $("#buttons").append('<a href="' + sdk.repo + '" target="_blank" class="btn btn-default">Repository</a>');

            var params = parseParams(location.search);
            if (params.server) {
                $("#server-url").val(params.server);
            }

            if (params.app_key) {
                $("#app_key").val(params.app_key);
            }

            if (params.server && params.app_key) {
                $(".configuration").hide();
            }

            var template = "#import \"Countly.h\"\n" +
                "\n" +
                "- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions\n" +
                "{\n" +
                "   CountlyConfig* config = CountlyConfig.new;\n" +
                "   config.appKey = @\"YOUR_APP_KEY\";\n" +
                "   config.host = @\"https://YOUR_COUNTLY_SERVER\";\n" +
                "   config.deviceID = CLYIDFA;\n" +
                "   //You can specify optional features you want here\n" +
                "   [features]\n" +
                "   [options]\n" +
                "   [Countly.sharedInstance startWithConfig:config];\n" +
                "   \n" +
                "   // your code\n" +
                "}";


            var template_swift = "func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool\n" +
                "{\n" +
                "   let config: CountlyConfig = CountlyConfig()\n" +
                "   config.appKey = \"YOUR_APP_KEY\"\n" +
                "   config.host = \"https://YOUR_COUNTLY_SERVER\"\n" +
                "   config.deviceID = CLYIDFA\n" +
                "   //You can specify optional features you want here\n" +
                "   [features]\n" +
                "   [options]\n" +
                "   Countly.sharedInstance().start(with: config)\n" +
                "   \n" +
                "   // your code\n" +
                "   return true\n" +
                "}";

            var pushHandling =
                "   //Ask for user's permission for Push Notifications (not necessarily here)\n" +
                "   //You can do this later at anypoint in the app\n" +
                "   [Countly.sharedInstance askForNotificationPermission];\n";

            var pushHandlingSwift =
                "   //Ask for user's permission for Push Notifications (not necessarily here)\n" +
                "   //You can do this later at anypoint in the app\n" +
                "   Countly.sharedInstance().askForNotificationPermission();\n";

            $("#generate").click(function () {
                $(".alert").remove();
                $(".integrate").hide();
                var data = {};
                data.url = $("#server-url").val();

                if (data.url == "") {
                    $("#server-url").parent().prepend('<div class="alert alert-danger" role="alert">Please provide server URL</div>');
                    return;
                }

                if (data.url.indexOf("http") != 0) {
                    $("#server-url").parent().prepend('<div class="alert alert-danger" role="alert">Your server URL should start with http:// or https://</div>');
                    return;
                }

                if (data.url.indexOf("https") != 0) {
                    $("#end-modal .modal-body #push").after('<div class="alert alert-warning" role="alert"><strong>Note:</strong> Your server does not use secure https. It means that for iOS 9+ versions you need to add <strong>NSAppTransportSecurity</strong> key into your applications info.plist file, with one of the following values: <strong>NSAllowsArbitraryLoads</strong> or <strong>NSExceptionDomains</strong> to communicate with server (<a href="https://developer.apple.com/library/prerelease/ios/releasenotes/General/WhatsNewIniOS/Articles/iOS9.html#//apple_ref/doc/uid/TP40016198-SW14" target="_blank">More information</a>)</div>');
                }

                data.app_key = $("#app_key").val();

                if (data.app_key == "") {
                    $("#app_key").parent().prepend('<div class="alert alert-danger" role="alert">Please provide App Key</div>');
                    return;
                }

                data.platform = $("input:radio[name=platform]:checked").val();

                if (!data.platform || data.platform == "") {
                    $(".platform").prepend('<div class="alert alert-danger" role="alert">Please select platform</div>');
                    return;
                }

                $(".integrate." + data.platform.toLowerCase()).show();

                data.device_id = $("input:radio[name=device_id]:checked").val();

                if (!data.device_id || data.device_id == "") {
                    $(".device_id").prepend('<div class="alert alert-danger" role="alert">Please select at least way to generate device Id</div>');
                    return;
                }

                var features = $(".feature:checked:visible").map(function (feature) {
                    return this.value;
                }).get();

                if (features.length) {
                    data.features = "config.features = @[" + features.join(", ") + "];\n";
                    data.features_swift = "config.features = [" + features.join(", ") + "]\n";
                    if (features.indexOf("CLYPushNotifications") === -1) {
                        $("#push").hide();
                    }
                }
                else {
                    data.features = "";
                    data.features_swift = "";
                }

                data.options = $(".advanced-list input").map(function (el) {
                    if (this.type == "text") {
                        if ($(this).hasClass("arr") && this.value.replace(/^\s+|\s+$/gm, '') != "") {
                            var arr = this.value.split(",");
                            for (var i = 0; i < arr.length; i++) {
                                arr[i] = '@"' + arr[i].replace(/^\s+|\s+$/gm, '') + '"';
                            }
                            return { id: this.id, value: '@[' + arr.join(",") + ']' };
                        }
                        else if (isNaN(this.value))
                            return { id: this.id, value: '@"' + this.value + '"' };
                        else
                            return { id: this.id, value: this.value };
                    }
                    else if (this.type == "checkbox" && this.checked)
                        return { id: this.id, value: this.value };
                    else
                        return { id: this.id, value: "" };
                }).get().filter(function (el) {
                    if (el.value.length && el.value != '""')
                        return true;
                    return false;
                }).map(function (el) {
                    return "   config." + el.id + ' = ' + el.value + ';';
                });

                var toBool = { YES: "true", NO: "false" };

                data.options_swift = $(".advanced-list input").map(function (el) {
                    if (this.type == "text") {
                        if ($(this).hasClass("arr") && this.value.replace(/^\s+|\s+$/gm, '') != "") {
                            var arr = this.value.split(",");
                            for (var i = 0; i < arr.length; i++) {
                                arr[i] = '"' + arr[i].replace(/^\s+|\s+$/gm, '') + '"';
                            }
                            return { id: this.id, value: '[' + arr.join(",") + ']' };
                        }
                        else if (isNaN(this.value))
                            return { id: this.id, value: '"' + this.value + '"' };
                        else
                            return { id: this.id, value: this.value };
                    }
                    else if (this.type == "checkbox" && this.checked)
                        return { id: this.id, value: toBool[this.value] };
                    else
                        return { id: this.id, value: "" };
                }).get().filter(function (el) {
                    if (el.value.length && el.value != '""')
                        return true;
                    return false;
                }).map(function (el) {
                    return "   config." + el.id + ' = ' + el.value + '';
                });

                if (data.options.length) {
                    data.options = data.options.join("\n") + "\n";
                }
                else {
                    data.options = "";
                }

                if (data.options_swift.length) {
                    data.options_swift = data.options_swift.join("\n") + "\n";
                }
                else {
                    data.options_swift = "";
                }

                var code = template.replace("https://YOUR_COUNTLY_SERVER", data.url)
                    .replace("YOUR_APP_KEY", data.app_key)
                    .replace("   [options]\n", data.options)
                    .replace("[features]", data.features);

                var code_swift = template_swift.replace("https://YOUR_COUNTLY_SERVER", data.url)
                    .replace("YOUR_APP_KEY", data.app_key)
                    .replace("   [options]\n", data.options_swift)
                    .replace("[features]", data.features_swift);


                if (data.device_id == "CLYSDKDefault") {
                    code = code.replace("   config.deviceID = CLYIDFA;\n", "");
                    code_swift = code_swift.replace("   config.deviceID = CLYIDFA\n", "");
                }
                else if (data.device_id == "CLYCustom") {
                    code = code.replace("CLYIDFA", '"' + $('#custom_devide_id').val() + '"');
                    code_swift = code_swift.replace("CLYIDFA", '"' + $('#custom_devide_id').val() + '"');
                }
                else {
                    code = code.replace("CLYIDFA", data.device_id);
                    code_swift = code_swift.replace("CLYIDFA", data.device_id);
                }

                if (features.length == 0) {
                    code = code.replace("   //You can specify optional features you want here\n", "");
                    code_swift = code_swift.replace("   //You can specify optional features you want here\n", "");
                }

                if (features.indexOf("CLYPushNotifications") > -1) {
                    code = code.replace("   // your code\n", pushHandling);
                    code_swift = code_swift.replace("   // your code\n", pushHandlingSwift);
                    $("#push").removeClass("hidden");
                }

                $("#end-code-objc").val(code);
                $("#end-code-swift").val(code_swift);
                $('#end-modal').modal();
            });

            $("#allfeatures").change(function () {
                $(".feature").prop('checked', $(this).prop("checked"));
                if ($(this).is(':checked')) {
                    $(".push-settings").removeClass("hidden");
                } else {
                    $(".push-settings").addClass("hidden");
                }
            });

            $(".gotit").click(function () {
                $('#end-modal').modal('hide');
            });

            $(".advanced span.label").on('click', function () {
                var downArrow = document.getElementById('dropdown-icon').style.display;
                if (downArrow === 'inline-block') {
                    $(this).parent().find("#dropdown-icon-2").attr('style', 'display: inline-block');
                }
                else {
                    $(this).parent().find("#dropdown-icon-2").attr('style', 'display: none');
                }
                $(this).parent().find("#dropdown-icon").toggle();
            });

            $("#download").click(function () {
                var platform = $("input:radio[name=platform]:checked").val();
                if (platform == "")
                    platform = "apple";
                var data = $("#end-code-objc").val();
                try {
                    var blob = new Blob([data], { type: "text/plain;charset=utf-8" });
                    saveAs(blob, platform + "-objc-sdk.txt");
                } catch (e) {
                    alert(data);
                }
            });

            $("#download-swift").click(function () {
                var platform = $("input:radio[name=platform]:checked").val();
                if (platform == "")
                    platform = "apple";
                var data = $("#end-code-swift").val();
                try {
                    var blob = new Blob([data], { type: "text/plain;charset=utf-8" });
                    saveAs(blob, platform + "-swift-sdk.txt");
                } catch (e) {
                    alert(data);
                }
            });


            $('input:radio[name=platform]').change(function () {
                $('input:radio[name=device_id]').removeAttr('checked');
                $("#device_id_sdk_default_text").text("SDK Default");
                $("#device_id_CLYSDKDefault input").prop("checked", "checked");
                $('#custom_devide_id').prop('disabled', true);
                $('#custom_devide_id').val('');

                $('#feature_CLYPushNotifications').hide();
                $('#feature_CLYCrashReporting').hide();
                $('#feature_CLYAutoViewTracking').hide();

                platform = $("input:radio[name=platform]:checked").val();
                if (platform == 'iOS') {
                    $('#device_id_CLYIDFV').show();
                    $('#device_id_CLYOpenUDID').show();
                    $("#device_id_sdk_default_text").text("SDK Default (IDFA)");

                    $('#feature_CLYPushNotifications').show();
                    $('#feature_CLYCrashReporting').show();
                    $('#feature_CLYAutoViewTracking').show();
                }
                else if (platform == 'watchOS') {
                    $('#device_id_CLYIDFV').hide();
                    $('#device_id_CLYOpenUDID').hide();
                }
                else if (platform == 'tvOS') {
                    $('#device_id_CLYIDFV').hide();
                    $('#device_id_CLYOpenUDID').hide();
                }
                else if (platform == 'OSX') {
                    $('#device_id_CLYIDFV').hide();
                    $('#device_id_CLYOpenUDID').show();
                }
            });


            $('input:radio[name=device_id]').change(function () {
                device_id = $("input:radio[name=device_id]:checked").val();

                if (device_id == 'CLYCustom') {
                    $('#custom_devide_id').prop('disabled', false);
                }
                else {
                    $('#custom_devide_id').prop('disabled', true);
                    $('#custom_devide_id').val('');
                }
            });
        });
    </script>
</body>
</html>