Integración Devera Widget iOS

General

Utilizarás un WKWebView para mostrar el componente. Asegurate de tener WebKit.framework agregado al proyecto.

  1. Abre el proyecto en Xcode, en la navegación del proyecto (Project Navigator) a la izquierda de Xcode, haz clic en el nombre del proyecto para acceder a la configuración del mismo.
  2. En la configuración, en el panel izquierdo, selecciona el target al que agregarás el framework WebKit.
  3. Ve a la pestaña "General" y baja hasta encontrar la sección "Frameworks, Libraries, and Embedded Content".
  4. Utiliza el botón de "+" al final de esta sección para desplegar una lista de frameworks disponibles. Busca "WebKit" y el framework WebKit debería aparecer en esta. Selecciona WebKit.framework y haz clic en el botón de Agregar (Add) para incluirlo en el proyecto.

Swift

  1. Agregar un WKWebView al storyboard: Abre el storyboard de tu proyecto, arrastra un WKWebView desde la biblioteca de objetos a tu vista de controlador y conecta el WKWebView a tu ViewController creando un IBOutlet

  2. Configurar el WKWebView en el ViewController: Abre el archivo de tu ViewController y configura el WKWebView para cargar el 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" /* Puedes cambiar los valores por defecto */
        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 = "" // Si se deja vacío, se utilizará el lenguaje del sistema. Las opciones son: "es" para español, "en" para inglés y "de" para alemán
        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
               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)
    }
}

Recuerda cambiar los valores de your-token por tu token, your-client-id por tu client id y your-product-id por el id de producto que nos disteis para relacionarlo.

Objective-C

  1. Agregar un WKWebView al storyboard: Abre el storyboard de tu proyecto, arrastra un WKWebView desde la biblioteca de objetos a tu vista de controlador y conecta el WKWebView a tu ViewController creando un IBOutlet

  2. Configurar el WKWebView en el ViewController: Abre el archivo de tu ViewController y configura el WKWebView para cargar el HTML.

    #import "ViewController.h"
@import WebKit;

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

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    NSString *token = @"<your-token>";
    NSString *clientId = @"<your-client-id>";
    NSString *mainColor = @"#4b858e"; /* Puedes cambiar los valores por defecto */
    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 = @""; // Si se deja vacío, se utilizará el lenguaje del sistema. Las opciones son: "es" para español, "en" para inglés y "de" para alemán
    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 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, clientId, token, language];

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

@end

Recuerda cambiar los valores de your-token por tu token, your-client-id por tu client id y your-product-id por el id de producto que nos disteis para relacionarlo.