{"componentChunkName":"component---src-templates-blog-post-js","path":"/how-to-integrate-vuukle-in-native-mobile-application-ios/","result":{"data":{"site":{"siteMetadata":{"title":"Vuukle Docs","author":"Vuukle"}},"markdownRemark":{"id":"11f5f0eb-9707-510f-95eb-855c97a632e1","html":"

We want to create the best experience possible for you. You have no need to update SDK anymore, since it’s in the web view we will handle the heavy lifting for you. You will get the latest updates and new features as soon as they are uploaded on our servers.

\n

You will be working with our iframe URL’s

\n

Comment widget iframe looks like this:

\n

https://cdn.vuukle.com/amp.html?apiKey=c7368a34-dac3-4f39-9b7c-b8ac2a2da575&host=smalltester.000webhostapp.com&id=381&img=https://smalltester.000webhostapp.com/wp-content/uploads/2017/10/wallhaven-303371-825x510.jpg&title=Newpost&url=https://smalltester.000webhostapp.com/2017/12/new-post-22#1

\n

Required parameters (for comment widget iframe):

\n
    \n
  1. apiKey - Your API key (https://docs.vuukle.com/how-to-embed-vuukle-2.0-via-js/)
    2. \n
  2. host - your site host (Exclude http:// or www.)
    3. \n
  3. id -unique article ID
    4. \n
  4. img - article image
    5. \n
  5. title - article title
    6. \n
  6. url - article URL (include http:// or www.)
    7. \n
\n

Emote widget iframe looks like this:

\n

https://cdn.vuukle.com/widgets/emotes.html?apiKey=c7368a34-dac3-4f39-9b7c-b8ac2a2da575&host=smalltester.000webhostapp.com&articleId=381&img=https://smalltester.000webhostapp.com/wp-content/uploads/2017/10/wallhaven-303371-825x510.jpg&title=New%20post%2022&url=https://smalltester.000webhostapp.com/2017/12/new-post-22#1

\n

Required parameters (for emote widget iframe):

\n
    \n
  1. apiKey - Your API key (https://docs.vuukle.com/how-to-embed-vuukle-2.0-via-js/)
    2. \n
  2. host - your site host (Exclude http:// or www.)
    3. \n
  3. articleId -unique article ID
    4. \n
  4. img - article image
    5. \n
  5. title - article title
    6. \n
  6. url - article URL (include http:// or www.)
    7. \n
\n

If you have any additional options to include, please contact support@vuukle.com

\n

Integration Steps

\n

WKWebView is still not available on Interface Builder. However, it is very easy to add them via code.

\n

Example:

\n
import WebKit\n\noverride func viewDidLoad() {\n    super.viewDidLoad()\n\n    // MARK: - Create WKWebView with configuration\n\n    let configuration = WKWebViewConfiguration()\n    let wkWebView = WKWebView(frame: "your frame", configuration: configuration)\n\n    // MARk: - Add WKWebView to main view\n\n    self.view.addSubview(wkWebView)\n\n    let urlName = "yourUrl"\n\n    if let url = URL(string: urlName) {\n        wkWebView.load(URLRequest(url: url))\n    }\n\n}
\n

Example for log out by clearing cookies:

\n
private func clearAllCookies() {\n    let cookieJar = HTTPCookieStorage.shared\n\n    for cookie in cookieJar.cookies! {\n        cookieJar.deleteCookie(cookie)\n    }\n}\n\nprivate func clearCookiesFromSpecificUrl(yourUrl: String) {\n    let cookieStorage: HTTPCookieStorage = HTTPCookieStorage.shared\n    let cookies = cookieStorage.cookies(for: URL(string: yourUrl)!)\n    for cookie in cookies! {\n        cookieStorage.deleteCookie(cookie as HTTPCookie)\n    }\n}
\n

Handling “Report comment”:

\n

Note : your main ViewController must extends WKUIDelegate.

\n
// MARK: - Show confirm alert\n\nfunc webView(_ webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (Bool) -> Void) {\n\n    let alertController = UIAlertController(title: nil, message: message, preferredStyle: .alert)\n\n    alertController.addAction(UIAlertAction(title: "Ok", style: .default, handler: { (action) in\n        completionHandler(true)\n    }))\n\n    alertController.addAction(UIAlertAction(title: "Cancel", style: .default, handler: { (action) in\n        completionHandler(false)\n    }))\n\n    self.present(alertController, animated: true, completion: nil)\n}
\n

Handling authorization process:

\n

Note : your main ViewController must extends WKUIDelegate.

\n
private var isPopUpAppeared = false\n\n// MARK: - Show authorization tab\n\nfunc webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? {\n    if navigationAction.targetFrame == nil {\n        let popup = WKWebView(frame: self.view.frame, configuration: configuration)\n        popup.uiDelegate = self\n        self.view.addSubview(popup)\n        isPopUpAppeared = true\n        return popup\n    }\n    return nil\n}\n\n// MARK: - Close authorization tab\n\nfunc webViewDidClose(_ webView: WKWebView) {\n    if isPopUpAppeared {\n        webView.removeFromSuperview()\n    }\n}
\n

The full application example you can check here

","frontmatter":{"title":"How to integrate Vuukle web version into your native iOS application","date":"May 01, 2017","category":"Install Vuukle","tags":["how to","install","vuukle","native","ios"],"shortDescription":"We want to create the best experience possible for you. You have no need to update SDK anymore, since it's in the web view we will handle the heavy lifting for you. You will get the latest updates and new features as soon as they are uploaded on our servers"}}},"pageContext":{"id":"11f5f0eb-9707-510f-95eb-855c97a632e1"}}}