{"componentChunkName":"component---src-templates-blog-post-js","path":"/how-to-integrate-vuukle-sdk-into-your-android-app/","result":{"data":{"site":{"siteMetadata":{"title":"Vuukle Docs","author":"Vuukle"}},"markdownRemark":{"id":"abe17fe8-e7bb-5168-8195-5b087d4c4217","html":"<p>​ <strong>[DEPRECATED]</strong></p>\n<p>​ Support will be not provided</p>\n<p>We offer the powerful SDK ( software development kit) that allows to setup advanced commenting and user engagement system into any Android application.</p>\n<div class=\"gatsby-resp-iframe-wrapper\" style=\"padding-bottom: 56.25%; position: relative; height: 0; overflow: hidden; margin-bottom: 1.0725rem\" > <iframe src=\"https://www.youtube.com/embed/-E4fPdv-qT8\" frameborder=\"0\" allowfullscreen style=\" position: absolute; top: 0; left: 0; width: 100%; height: 100%; \"></iframe> </div>\n<p>To setup Vuukle into your project just follow these steps:</p>\n<ol>\n<li>Set up project build.gradle</li>\n</ol>\n<p>1.1) add classpath for retro\n<code class=\"language-text\">lambdabuildscript {dependencies {classpath &#39;me.tatarka:gradle-retrolambda:3.3.0-beta3&#39;}}</code></p>\n<p>1.2) <code class=\"language-text\">add jitpackallprojects {repositories {jcenter()maven { url &#39;https://jitpack.io&#39; }}}</code></p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 860px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/2ef13819e3f20db1dfc42359ba589322/914ae/how-to-integrate-vuukle-sdk-into-your-android-app-img_1.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 101.66666666666666%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsSAAALEgHS3X78AAABOklEQVQ4y+2Ry2rDMBBF/SkhqWNZGmk0I+thJQRKFt100///mY5cB6eBQui2HS5Gr6M7V+445jqnUmtMBQCMNmvdBiOAAhgWfa1Za6EdhS7ExEwx57meiQk9ehE1ydihS8actD5rfdGahXOytlY3iaF1nqjUEzH60CQDmtAzOsLrMLwfDqKP3S4oNRrTXJfqYp7lNpl5RCLxbsXMgThIS4jGOYU4IL5YOy7MBqc8i620o7XeghojCY8APUCz0lpkb1t3zql4DhI4l7q+hGyBmZW6HI+vfT+N43blo3OZQUIjhilZJwmMQwvOXvv+TaLu9/MwjLfTj/CUiycWWEh530abttd6tlZyqu/kg3OV9wkxyieESJ4ttHRwpx9hlm6t0xJsKfNEbTCFKP/dPIf9w38TLvWccokp/0KfJBbTw/Q077UAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"img 1\"\n        title=\"img 1\"\n        src=\"/static/2ef13819e3f20db1dfc42359ba589322/914ae/how-to-integrate-vuukle-sdk-into-your-android-app-img_1.png\"\n        srcset=\"/static/2ef13819e3f20db1dfc42359ba589322/8ff5a/how-to-integrate-vuukle-sdk-into-your-android-app-img_1.png 240w,\n/static/2ef13819e3f20db1dfc42359ba589322/e85cb/how-to-integrate-vuukle-sdk-into-your-android-app-img_1.png 480w,\n/static/2ef13819e3f20db1dfc42359ba589322/914ae/how-to-integrate-vuukle-sdk-into-your-android-app-img_1.png 860w\"\n        sizes=\"(max-width: 860px) 100vw, 860px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span>2)) Set up app build.gradle</p>\n<p>1.1) add plugin\n<code class=\"language-text\">apply plugin: &#39;me.tatarka.retrolambda&#39;</code>\n1.2) add library to project\ndependencies <code class=\"language-text\">{compile &#39;com.github.vuukle:vuukle_android_sdk:v1.0.1&#39;}</code></p>\n<p>1.3)<code class=\"language-text\">set dataBinding trueandroid {...dataBinding {enabled true}}</code></p>\n<p>1.4) <code class=\"language-text\">set minSdkVersion: 16android {defaultConfig {...minSdkVersion 16}</code></p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 778px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/ceac521d8842a6f455c4fcbe706f4bd2/20982/how-to-integrate-vuukle-sdk-into-your-android-app-img_2.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 110.41666666666667%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAWCAIAAABPIytRAAAACXBIWXMAAAsSAAALEgHS3X78AAABv0lEQVQ4y+VS207cQAzlT6JEKs2MPR7PeG5Zwi4InqCq+lKpVf//P+pkL3QRXVBfa1mOlejk2D7nSnKt08RCHIiTj8lzDTPj96771ve/uu7LMIwACGeBuLy4ipJTqVESh+DZo3MWwAGkcdTM4yjGWHgdB7APknLZ3T1st/faEDvnlk+G0JIzzhlE+Bs4RAGwOdd53mlVfvLOrUlM2sMb2COYo1iwEvPtzV0u1RHZQ8DxAZeYtRNOVabIwj6wj7TQHnPtPZOmIzwHixBRbZtSmsNlZHprzkvMim/1RrPmUrLo8SWXsNxfORdmR8sI/jjLCZwcqjzWWGO0Alr9gIiI7zNzEK++KJNSVWt+dN3PrnsaBvMRsMqs3botERi0ds2P7awOq20qtXn1p1eHqcdQj+bc3i24SGXh1e9exlYR2mae5ts6NV0iJI6ZtYak9mNKjDmAVqbTIQ7glNJUk6QSJajArOAVrw1HrybboN3Z8cGMsgetsZ9qkapNbbu7L1ORFlOLUlSBoJwhesf+8dP1cz987fuiahCt6+h5lkbtmfbr4B8mtieLAoyInxGv8WzrF2+/c9hjwj+AL5rk/wP/BgId6kARfz30AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"img 2\"\n        title=\"img 2\"\n        src=\"/static/ceac521d8842a6f455c4fcbe706f4bd2/20982/how-to-integrate-vuukle-sdk-into-your-android-app-img_2.png\"\n        srcset=\"/static/ceac521d8842a6f455c4fcbe706f4bd2/8ff5a/how-to-integrate-vuukle-sdk-into-your-android-app-img_2.png 240w,\n/static/ceac521d8842a6f455c4fcbe706f4bd2/e85cb/how-to-integrate-vuukle-sdk-into-your-android-app-img_2.png 480w,\n/static/ceac521d8842a6f455c4fcbe706f4bd2/20982/how-to-integrate-vuukle-sdk-into-your-android-app-img_2.png 778w\"\n        sizes=\"(max-width: 778px) 100vw, 778px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<ol start=\"3\">\n<li>Use java 1.8</li>\n<li>create Layout in .xml file for Vuukle comments</li>\n<li>create method in which init our library\n<code class=\"language-text\">private void initVuukleLibrary() {</code></li>\n</ol>\n<p><code class=\"language-text\">new VuukleApiBuilder(this).setVuukleApiKey(&quot;6eaaf29c-d074-47bd-b462-92aaacdfcb5b&quot;).setVuukleHost(&quot;vuukle.com&quot;).setVuukleSecretKey(&quot;07115720-6848-11e5-9bc9-002590f371ee&quot;).build(); //- this method you need to init only ones.</code>\n<code class=\"language-text\">new VuukleCommentsBuilder().setVuukleArticleId(&quot;00059&quot;).setTimeZone(&quot;Europe/Kiev&quot;).setArticleUrl(&quot;http://smalltester.esy.es/2017/01/20/article-6/&quot;).setVuukleTags(&quot;articleTag1, articleTag&quot;).setVuukleTitle(&quot;The title of the article&quot;).setPaginationToCount(2).setContext(this).setTopArticle(true).setFragmentId(R.id.container_for_vuukle_library).build(); //- this method you need to set for every article}</code></p>\n<p>– setVuukleHost(HOST) – Set host for API. Host – this is the domain of the publisher’s site(e.g. indianexpress.com, thehindu.com etc.).\nFor example: You are the owner of indianexpress.com and have own app where want’s to setup this library,\nso when library installed on your app, You should paste domain for ‘host’ property without http:// or https:// or www.</p>\n<p>– setVuukleSecretKey(SECRET_KEY) – To get SECRET KEY / API KEY you need :</p>\n<ol>\n<li>Sign in to dashboard through vuukle.com</li>\n<li>Navigate to domain from home page of dashboard (first page after signing in)</li>\n<li>Choose in menu Integration, then API Docs from the dropdown</li>\n<li>Then you will be able to see API and SECRET keys\n—- or —-</li>\n<li>Sign in to dashboard though vuukle.com</li>\n<li>after signing in, in the header you can find ‘Integration’ click -> choose API docs in the drop-down.</li>\n</ol>\n<p>– setVuukleApiKey(API_KEY) – same as for SECRET KEY</p>\n<p>– setVuukleArticleId(ARTICLE<em>ID) – every article have unique Article ID\n– setTimeZone(TIME</em>ZONE) – set your timezone. <a href=\"https://en.wikipedia.org/wiki/List_of_tz_database_time_zones\">https://en.wikipedia.org/wiki/List_of_tz_database_time_zones</a>\n– setVuukleUrl(URL) – URL for your article (you will be able to share this link to facebook or to twitter)\n– setVuukleTagsTags(TAGS) Tags – You need to paste tags separated by comma for each article(like you have on website/domain),\n– setTopArticle(true) it will show top articles below the comments\n– setVuukleTitle(TITLE) same for TITLE – the title of the article on which library is now.\n– setPaginationToCount(paginationToCount) – this field in not required. You can set how many comments will be downloaded per one request. By default 10.\n– setContext(this) – put context;\n– setFragmentId(R.id.container) – Set fragment id from your .xml in which you want to put all comments</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 680px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/064036f490507fe9bb054fb993b6f0b8/c5bb3/how-to-integrate-vuukle-sdk-into-your-android-app-img_3.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 51.66666666666666%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsSAAALEgHS3X78AAAA+0lEQVQoz4VRbXaEIBDzOpWPYQYEFMTa9v5nanjqrv2x3ZCHigSSmUFrJVZ77/NSwDnHOElIMabkQ3CeSKwlQ852suVAmDVkSg26QxljSvss6wZ9XJJMjr0j7vsgPmRdYzSoLgzjeL6Rc9aYEd8YH+P4+PEX9+UheidkwjTlGbbrjJtTxp2WcNQbDOwID0u0bvv29VO3lksKWSTANNLaM+1F4Ck+HWi91FbWhlkiS3SILRP5xN0Ywl7U6pb5qJvu4q1ueyk15eSEz93UK/Qq/1OMUrf9u611QeyYo7A1dBDe34hTntFbx9xJzL1oaEAnkftPfOvEBXXjC9u/2ydurHNvGL8AAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"img\"\n        title=\"img\"\n        src=\"/static/064036f490507fe9bb054fb993b6f0b8/c5bb3/how-to-integrate-vuukle-sdk-into-your-android-app-img_3.png\"\n        srcset=\"/static/064036f490507fe9bb054fb993b6f0b8/8ff5a/how-to-integrate-vuukle-sdk-into-your-android-app-img_3.png 240w,\n/static/064036f490507fe9bb054fb993b6f0b8/e85cb/how-to-integrate-vuukle-sdk-into-your-android-app-img_3.png 480w,\n/static/064036f490507fe9bb054fb993b6f0b8/c5bb3/how-to-integrate-vuukle-sdk-into-your-android-app-img_3.png 680w\"\n        sizes=\"(max-width: 680px) 100vw, 680px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<p>Additional features:</p>\n<ol start=\"6\">\n<li>VuukleColorEditor is a static class for changing color UI element in the library for example:</li>\n</ol>\n<p><code class=\"language-text\">VuukleColorEditor.setReportButtonColor(Color.parseColor(&quot;#FFFFFF&quot;)); // set color for report buttonVuukleColorEditor.setLoginButtonBackgroundColor(Color.parseColor(&quot;#5F6065&quot;)); //set background color for login buttonVuukleColorEditor.setUserNameColor(Color.parseColor(&quot;#FFFFFF&quot;)); // set user name color</code></p>","frontmatter":{"title":"[DEPRECATED] How to integrate Vuukle SDK into your Android app","date":"May 01, 2017","category":"Install Vuukle","tags":["how to","install","android","sdk"],"shortDescription":"We offer the powerful SDK ( software development kit) that allows to setup advanced commenting and user engagement system into any Android application."}}},"pageContext":{"id":"abe17fe8-e7bb-5168-8195-5b087d4c4217"}}}