Devera Widget iOS Integration

General

You will use a WKWebView to display the component. Ensure you have WebKit.framework added under your project's frameworks.

  1. Start by opening your project in Xcode, in the Project Navigator on the left side of Xcode, click on your project's name at the top to access the project settings.
  2. Within the project settings, on the left panel, select the target where you want to add the WebKit framework.
  3. Go to the "General" Tab and scroll down to find the section labeled "Frameworks, Libraries, and Embedded Content".
  4. Use the "+" button at the bottom of this section to open a list of available frameworks and libraries. Search for "WebKit" and you should see the WebKit framework appear in the list. Select WebKit.framework and click the "Add" button to include it in your project.

Swift

  1. Add a WKWebView to the storyboard: Open the storyboard of your project, drag a WKWebView from the object library to your controller view and connect the WKWebView to your ViewController by creating an IBOutlet.

  2. Configure the WKWebView in the ViewController: Open your ViewController file and configure the WKWebView to load the HTML.

    import UIKit
import WebKit

class ViewController: UIViewController {

    @IBOutlet weak var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let productId = "<your-product-id>"
        let token = "<your-token>"
        let clientId = "<your-client-id>"
        let mainColor = "#4b858e" /* You can change the default values */
        let mainActive = "#2c4e54"
        let mainDisabled = "#9db8bc"
        let secondary = "#a3d5cd"
        let secondaryDark = "#9ac6bf"
        let secondaryMiddle = "#c8e7e2"
        let secondaryLight = "#e8f6f3"
        let secondarySuperDark = "#7baaa3"
        let font = "'Montserrat', sans-serif"
        let language = "" // If left empty, the system default language will be used. Options include: "es" for spanish, "en" for english and "de" for german
        let maxWidth = "420px"
        let height = "500px"

        let htmlData = """
            <html>
              <head>
               <style>
                 :root {
                   --devera-main: \(mainColor);
                   --devera-mainActive: \(mainActive);
                   --devera-mainDisabled: \(mainDisabled);
                   --devera-secondary: \(secondary);
                   --devera-secondaryDark: \(secondaryDark);
                   --devera-secondaryMiddle: \(secondaryMiddle);
                   --devera-secondaryLight: \(secondaryLight);
                   --devera-secondarySuperDark: \(secondarySuperDark);
                   --devera-font: \(font);
                   --devera-microMaxWidth: \(maxWidth);
                   --devera-microHeight: \(height);
                 }
               </style>
             </head>
             <body>
             <devera-widget
               product-id="\(productId)"
               client-id="\(clientId)"
               token="\(token)"
               language="\(language)"
             ></devera-widget>
             <script src="https://widget.devera.ai/widget.umd.js"></script>
           </body>
         </html>
        """

        let baseURL = URL(string: "https://widget.devera.ai")
        webView.loadHTMLString(htmlData, baseURL: baseURL)
    }
}

Remember to change the values of your-token to your token, your-client-id to your client id and your-product-id with the id of the product that you gave us to relate it to.

Objective-C

  1. Add a WKWebView to the storyboard: Open the storyboard of your project, drag a WKWebView from the object library to your controller view and connect the WKWebView to your ViewController by creating an IBOutlet.

  2. Configure the WKWebView in the ViewController: Open your ViewController file and configure the WKWebView to load the HTML.

    #import "ViewController.h"
@import WebKit;

@interface ViewController ()
@property (weak, nonatomic) IBOutlet WKWebView *webView;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    NSString *productId = @"<your-product-id>";
    NSString *token = @"<your-token>";
    NSString *clientId = @"<your-client-id>";
    NSString *mainColor = @"#4b858e"; /* You can change the default values */
    NSString *mainActive = @"#2c4e54";
    NSString *mainDisabled = @"#9db8bc";
    NSString *secondary = @"#a3d5cd";
    NSString *secondaryDark = @"#9ac6bf";
    NSString *secondaryMiddle = @"#c8e7e2";
    NSString *secondaryLight = @"#e8f6f3";
    NSString *secondarySuperDark = @"#7baaa3";
    NSString *font = @"'Montserrat', sans-serif";
    NSString *language = @""; // If left empty, the system default language will be used. Options include: "es" for spanish, "en" for english and "de" for german
    NSString *maxWidth = @"420px";
    NSString *height = @"500px";

    NSString *htmlData = [NSString stringWithFormat:@"<html><head><style>:root { --devera-main: %@; --devera-mainActive: %@; --devera-mainDisabled: %@; --devera-secondary: %@; --devera-secondaryDark: %@; --devera-secondaryMiddle: %@; --devera-secondaryLight: %@; --devera-secondarySuperDark: %@; --devera-font: %@; --devera-microMaxWidth: %@; --devera-microHeight: %@; }</style></head><body><devera-widget product-id='%@' client-id='%@' token='%@' language='%@'></devera-widget><script src='https://widget.devera.ai/widget.umd.js'></script></body></html>", mainColor, mainActive, mainDisabled, secondary, secondaryDark, secondaryMiddle, secondaryLight, secondarySuperDark, font, maxWidth, height, productId, clientId, token, language];

    NSURL *baseURL = [NSURL URLWithString:@"https://widget.devera.ai"];
    [self.webView loadHTMLString:htmlData baseURL:baseURL];
}

@end

Remember to change the values of your-token to your token, your-client-id to your client id and your-product-id with the id of the product that you gave us to relate it to.