Saltar al contenido principal

Domo University Videos

Domo

Compartir tarjetas fuera de Domo mediante Domo Embed

Importante: Cuando haga referencia a esta página fuera de la Base de conocimientos, use este vínculo: https://knowledge.domo.com?cid=domoembed

Introducción

Con la característica "Domo Everywhere: Domo Embed", puede integrar tarjetas de Domo como sigue:

  • De manera privada, en sitios web, portales o aplicaciones que tengan habilitada la autenticación única (SSO).

  • De manera pública en sitios web, blogs o redes sociales como Facebook y Twitter.

Importante: Por motivos de seguridad, Domo Everywhere: DomoEmbed no está disponible para instancias de DOMO compatibles con HIPAA.

Para ello, copie una cadena HTM generada automáticamente desde Domo y péguela en la ubicación necesaria en el sitio web, el blog, etc. como un iFrame o mediante una API de JavaScript. Esta característica le permite compartir datos empresariales de una forma práctica, interactiva y accesible.

Tiene la opción de elegir si desea o no incluir características de tarjetas disponibles con regularidad en la vista Detalles, incluidas las siguientes:

También puede establecer el tamaño de las tarjetas integradas, con la selección de un tamaño preestablecido o especificando una anchura y altura personalizadas.

Domo Everywhere: Domo Embed es compatible con los permisos personalizados de datos, aunque solo resulta viable para las tarjetas integradas de forma privada.  

Puede obtener una vista administrativa del contenido integrado mediante el registro de actividad.

¿No tiene claro cuándo usar la integración pública y privada? Consulte este PDF para buscar casos de uso de cada opción: Public Embed and Authenticated Embed1.pdf

Vídeo de aprendizaje: Integración de una tarjeta de Domo

Obtenga un resumen de las características básicas de Domo Embed. 

 

Vídeo de aprendizaje: Publicar tarjetas en su instancia

Obtenga información sobre cómo publicar tarjetas en su instancia para poder integrarlas de forma externa o interna.

 

Nota: Los vídeos de aprendizaje sobre productos solo están dirigidos a clientes de Domo.

Consideraciones

Para integrar tarjetas de forma privada, deben cumplirse todas las condiciones siguientes:

  • La autenticación única (SSO) debe estar habilitada tanto en Domo como en el sitio web, el portal o la aplicación.

    • Si la opción Solo pueden acceder a Domo las personas invitadas está habilitada en Configuración del administrador > Autenticación única, se denegará el acceso a la tarjeta a todos aquellos que no sean usuarios de Domo. Si esta opción está deshabilitada, se aprovisionará automáticamente a quienes no sean usuarios de Domo en función de los derechos de acceso establecidos para los usuarios predeterminados. La configuración predeterminada es "Privilegiado".

    • Para obtener más información sobre los derechos de acceso, consulte Control de acceso en Domo.

  • Actualmente, las cookies de terceros deben estar habilitadas en el sitio web, el portal o la aplicación.

  • Los usuarios de redes sociales no pueden realizar integraciones, crear un iFrame ni ver contenido integrado de forma privada. Los usuarios con el rol "Participante" no pueden integrar contenido de forma privada, pero sí pueden verlo.

  • Si la integración se realiza en un explorador Safari, debe enrutar temporalmente la ventana del cliente a un extremo CORS para poder configurar una cookie de Domo como marcador de posición. Esto se trata con más detalle a continuación, en Cumplimiento de la política de cookies de terceros de Safari.

También debe tener en cuenta lo siguiente:

  • Si, por motivos de seguridad, no desea que los empleados puedan integrar tarjetas de forma pública, puede desactivar esta funcionalidad en la empresa; para ello, vaya a Configuración del administrador > Configuración de la empresa > Resumen de la empresa y, a continuación, desmarque la casilla "Insertar tarjetas públicamente".

  • La integración privada está disponible para todos los tipos de tarjetas, salvo para las tablas dinámicas de Sumo, mientras que la pública actualmente se encuentra disponible solo para las tarjetas de indicador de desempeño clave y las aplicaciones personalizadas. Actualmente no es posible integrar otros tipos de tarjetas, como las de portátil, las de documentos, etc.

  • Los títulos, los sondeos, los números de resumen y el selector de diagramas están disponibles para integrar tarjetas de forma pública, pero los filtros aún no lo están. Por motivos de seguridad, la vista de tabla de final de tarjeta no está disponible con esta característica.

  • Aunque puede integrar varias tarjetas en una página, deberá generar un código para cada tarjeta por separado.

  • Actualmente no puede integrar una página de tarjetas como un iFrame.

  • Se recomienda que no integre más de 10 tarjetas en una página, ya que, de lo contrario, se reducirá el rendimiento. 

  • Las tablas dinámicas de Sumo no son compatibles.

Cumplimiento de la política de cookies de terceros de Safari

Safari dispone de una política de cookies de terceros que impide a los clientes configurar las cookies para dominios de terceros si no disponen de permisos para ello. Esta política se aplica a todos los scripts y widgets integrados desde orígenes de terceros, no solo a las tarjetas de Domo. Esto supone que, a menos que el cliente ya haya configurado las cookies para el dominio de Domo antes de acceder a la solución de integración, se producirá un error cuando este intente consultar en Safari el contenido de Domo integrado de forma privada. Es muy probable que experimente un bucle de redireccionamiento infinito desde la tarjeta de Domo al extremo de autenticación del proveedor de identidad (IdP). No se generará ningún error, salvo en el caso de que el IdP limite los intentos de solicitud de autenticación, en cuyo caso puede aparecer un error 429 (Demasiadas solicitudes).

Los ingenieros de Domo han agregado un extremo CORS como solución alternativa. El enrutamiento temporal de la ubicación de la ventana del cliente a este extremo desde el sitio de integración configura una cookie de Domo como marcador de posición mientras que el dominio de Domo tiene el contexto completo de la ventana de Safari. A continuación, se vuelve a realizar un redireccionamiento al sitio de integración sin representar ningún contenido de Domo (el usuario prácticamente no lo percibe). Una vez configurada la cookie en el dominio de Domo dentro de Safari, el cliente podrá configurar todas las cookies de terceros para Domo que sean necesarias en el contenido integrado.

Para que esto funcione, siga estos dos pasos:

  1. Vaya a Administrador > Seguridad > Insertar configuración en Domo y escriba los nombres de todos los dominios a los que desea acceder desde Safari. (Debe tener un perfil de seguridad predeterminado de "Administrador" o un rol personalizado con el privilegio "Integrar tarjetas" habilitado para acceder a esta página en la Configuración del administrador). La página de rebote solo funcionará cuando el explorador del usuario proceda de una de las direcciones URL permitidas que se encuentran en esta lista.

  2. Ejecute el código JavaScript siguiente y asegúrese de reemplazar el texto embeddingsite con el nombre del dominio de Domo. Este código JavaScript comprueba si el explorador acepta una cookie de Domo; si no la acepta, se le envía a la página de rebote en la instancia de Domo. Puede ejecutar el código JavaScript en cualquier momento antes de integrar una tarjeta de Domo en Safari. 
     

Importante: NO ejecute este código más de una vez por cliente e historial o, de lo contrario, podría entrar en un bucle infinito. Para evitar que se produzca un bucle infinito, configure una cookie o una variable "Localstorage" de la que realizar un seguimiento en caso de que el código siguiente ya se haya ejecutado.

 

/**
 * checkThirdPartyCookies
 * 
 * Revise la ayuda de CORS y compruebe que se haya configurado una cookie en el contexto de ventanas (para Domo) al menos una vez
 * para el soporte técnico de Safari. Tras llamar a este método, no es necesario volver a utilizarlo hasta que no se hayan borrado el historial y las cookies del explorador de 
 *.
 */
function checkThirdPartyCookies() {
  try {

    // Crear una solicitud para configurar una cookie de terceros
    var xhr = get("https://embeddingsite.domo.com/cookieSupport?action=setCookie").then(
      function success(xhr) {
        // CORS puede haber funcionado, por lo que debemos comprobar el valor de la cookie.
        checkCookie();
      }, function failure(xhr) {
        // Error en la solicitud inicial para configurar una cookie; CORS no está disponible en este explorador. Seleccione la página de rebote.
        window.location = "https://embeddingsite.domo.com/safari-special";
      });
      
      /**
       * checkCookie
       * 
       * Llame al extremo "cookieSupport?action=setCookie&cookieValue={cookieValue}" para comprobar que
       * la llamada original para configurar la cookie se ha realizado correctamente.
       */
      function checkCookie() {
        // Intente recuperar el valor de la cookie
        var cookieValue = getCookie("safari");
        
        // Si la cookie existe, compruebe su valor
        if (cookieValue) {
          // Cree una solicitud para comprobar el valor de la cookie
          var verifyXhr = get("https://embeddingsite.domo.com/cookieSupport?action=setCookie&cookieValue=" + cookieValue).then(function cookieSuccess(xhr) {
            // La solicitud se ha realizado correctamente, por lo que tenemos una respuesta. El texto de la respuesta debe ser un valor booleano true o false.
            var response = JSON.parse(responseText); 
            if (!response) { // if its not "true"
            // El valor de la cookie era incorrecto, por lo que debe seleccionar la página de rebote de todas formas.
            window.location = "https://embeddingsite.domo.com/safari-special";
          }
        }, function cookieFailure(xhr) {
          // Se ha producido un error al comprobar la cookie, así que seleccione la página de rebote.
          window.location = "https://embeddingsite.domo.com/safari-special";
        });
      } else {
        // No había ningún valor de cookie, así que seleccione la página de rebote.
        window.location = "https://embeddingsite.domo.com/safari-special";
      }
    }
  } catch (error) {
    // Las cookies de terceros no se admiten
    window.location = "https://embeddingsite.domo.com/safari-special";
  }
}

/**
 * getCookie
 * @param {String} name : el nombre de una cookie para recuperar un valor para
 */
function getCookie(name) {
  var value = "; " + document.cookie;
  var parts = value.split("; " + name + "=");
  if (parts.length == 2) return parts.pop().split(";").shift();
}

/**
 * get
 * @param {String} url : una dirección URL desde la que realizar la solicitud con un método GET 
 */
function get(url) {
  return new Promise(function(resolve, reject) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.withCredentials = true;
  xhr.send('null');
  xhr.onreadystatechange = function onReadyStateChange() {
    if(xhr.readyState === 4 && xhr.status !== 200) {
      reject(xhr);
    } else if (xhr.readyState === 4 && xhr.status === 200) {
      resolve(xhr);
    }
  }
 });
}

Uso de Domo Everywhere: Domo Embed

Domo Everywhere: Domo Embed está disponible para todas las tarjetas. Puede acceder a la opción de la tarjeta a nivel de página o en la vista Detalles de la tarjeta; para ello, vaya al menú de herramientas y seleccione Domo Everywhere.

domo_embed_option.png
 

En la imagen siguiente se resaltan los componentes del cuadro de diálogo de Domo Everywhere: Domo Embed:

domo_embed_ui2.png

Puede usar la siguiente tabla para obtener más información sobre los componentes de este cuadro de diálogo:

Componente Descripción

Mostrar opciones

Permite activar o desactivar determinadas características de la tarjeta integrada. Para ello, se encuentran disponibles estas opciones:

  • Mostrar título. Cambia el título de la tarjeta.

  • Permitir sondeo. Activa o desactiva la funcionalidad de sondeo.

  • Permitir vista de tabla. Activa o desactiva la habilidad de abrir la tabla de datos de la tarjeta. Si esta opción está habilitada, aparece un icono de cuadrícula en la parte superior de la tarjeta. Los lectores de la tarjeta integrada deben hacer clic en este icono para abrir la tabla de datos. Solo está disponible para las tarjetas integradas de forma privada. 

  • Mostrar número de resumen. Activa o desactiva el número de resumen de la tarjeta.

  • Permitir cambios de filtro. Activa o desactiva la habilidad de configurar o modificar los filtros de la tarjeta. Si esta opción está habilitada, aparece un icono de embudo en la parte superior de la tarjeta. Los lectores de la tarjeta integrada deben hacer clic en este icono para activar o desactivar las opciones de filtro. Actualmente solo está disponible para las tarjetas integradas de forma privada.

  • Permitir selector de diagrama. Activa o desactiva la habilidad de cambiar el tipo de diagrama. Si esta opción está habilitada, aparece un icono de pastel en la parte superior de la tarjeta. Los lectores de la tarjeta integrada deben hacer clic en este icono para abrir el selector de diagrama.

Opciones de tamaño

Permiten establecer el tamaño de la tarjeta integrada de Domo. Hay tres tamaños predeterminados disponibles: Cuadrado (600 x 600 píxeles), Vertical (600 x 900 píxeles) y Horizontal (900 x 600 píxeles). También hay una opción Personalizar, que permite configurar una anchura y altura personalizadas.

Vista previa

Muestra una vista previa de la tarjeta con la configuración del tamaño y de las opciones que ha aplicado. Puede interactuar con esta vista previa exactamente de la misma forma que con la versión integrada de la tarjeta. Por ejemplo, puede cambiar el tipo de diagrama, sondear la tarjeta (si el sondeo está habilitado), activar o desactivar los elementos de serie haciendo clic en ellos en la leyenda, etc.

Menú Integrar

Permite elegir si esta tarjeta se va a integrar en un iFrame o con una API de JavaScript. Para obtener más información sobre la API de JavaScript, consulte la siguiente sección.

Opciones de privacidad

Permiten especificar si esta tarjeta se va a integrar de forma privada (opción predeterminada) o pública. Si decide que una tarjeta sea pública, todos los usuarios de la Web podrán ver tanto la tarjeta como los datos mostrados. Esto también da a Domo permiso para publicar la tarjeta como parte de la fuente de noticias de una tarjeta pública. 

Si elige la opción Pública, se genera una dirección URL (en Compartir vínculo), que puede copiar y pegar en el sitio web, el blog o la red social deseados, entre otros. También puede abrir directamente cualquiera de las 5 redes sociales (Facebook, Twitter, Google+, LinkedIn o Pinterest) para poder integrar la tarjeta inmediatamente. 

Cadena HTML

Muestra la cadena HTML generada automáticamente que debe copiar y pegar en el sitio web, el portal o la aplicación. Haga clic en el botón domo_embed_copy.png a la derecha de la cadena HTML para copiarla.

Para integrar una tarjeta fuera de Domo de forma privada:

  1. Acceda a la página en la que se encuentra la tarjeta o a la página Detalles de la tarjeta.

  2. En el menú de herramientas de la tarjeta, seleccione Domo Everywhere.

  3. Seleccione un tamaño preestablecido para la tarjeta integrada en el menú Tamaño predeterminado o seleccione Personalizar y escriba las dimensiones deseadas en los campos Ancho y Alto.

  4. Marque las casillas de todas las opciones de visualización que desea incluir en la tarjeta integrada.

  5. En el menú Integración mediante, seleccione si desea integrar la tarjeta en un iFrame o usar una API de JavaScript.
    Para obtener más información sobre la API de JavaScript, consulte la siguiente sección.

  6. Haga clic en el icono domo_embed_copy.png para copiar la cadena HTML que desea integrar.

  7. Pegue la cadena HTML en el sitio web, el portal o la aplicación donde desea que aparezca la tarjeta. Las instrucciones específicas para hacer esto variarán en función del sitio web, el portal o la aplicación. Consulte la documentación para obtener más información.

Para integrar una tarjeta fuera de Domo de forma pública:

  1. Acceda a la página en la que se encuentra la tarjeta o a la página Detalles de la tarjeta.

  2. En el menú de herramientas de la tarjeta, seleccione Domo Everywhere.

  3. Seleccione un tamaño preestablecido para la tarjeta integrada en el menú Tamaño predeterminado o seleccione Personalizar y escriba las dimensiones deseadas en los campos Ancho y Alto.

  4. Marque las casillas de todas las opciones de visualización que desea incluir en la tarjeta integrada.Las opciones
    Permitir vista de tabla y Permitir cambios de filtro no están disponibles actualmente para las tarjetas integradas públicamente. 

  5. Seleccione Disponible públicamente en el menú Opciones de privacidad.

  6. Haga clic en Publicar.

  7. Haga clic en el icono del portapapeles para copiar la dirección URL generada automáticamente. 

  8. (Condicional) Para integrar la tarjeta en cualquiera de las 5 redes sociales enumeradas, haga clic en el icono de la plataforma deseada, inicie sesión si es necesario y copie la dirección URL requerida por la plataforma. De lo contrario, abra el sitio web, el blog, etc., y pegue la dirección URL según sea necesario.

Uso de la API de JavaScript

Para integrar una tarjeta con la API de JavaScript, haga lo siguiente:

  1. En la sección <head> del documento HTML, agregue la siguiente cadena HTML, reemplazando “yourinstance” con la dirección URL y “yourkey" con la clave de la API.

    <script src="http://yourinstance.domo.com/embed/yourkey/domo.js"></script>

2. En la sección <body> de la cadena HTML, inserte <div> donde desee integrar la tarjeta de Domo.

3. Use Domo.embed para integrar una tarjeta en el elemento DIV.
Actualmente es la única función que puede usar. Puede usar Domo.embed para integrar una tarjeta en un elemento <div> por su identificador, clase o elemento DOM.

Ejemplos:

  Domo.embed(…).intoElementWithId(‘divid’);

 Domo.embed(…).intoElementWithClass(‘class’);

 Domo.embed(…).intoElement(document.body);

Ejemplo completo de HTML:

<html>

<head>

  <script

    src="http://domo.domo.com/embed/eyJhbGciOiJIUzI1NiJ9.eyJjdXN0b21lciI6IioiLCJhbGxvd2VkRG9tYWlucyI6IioiLCJleHBpcmVzIjoibmV2ZXIifQ.30NufBEghPEJMCFf2TwKMAHT6arvgPZ-badTqI49Q8I/domo.js"></script>

</head>

<body>

<div id=“my-chart” style="width: 600px; height: 600px;"></div>

<script>

  Domo.embed({

    type: "card",

    id: 1491996447,

    viewId: 1123,

    options: {

      showTitle: false,

      showSummaryNumber: true,

      allowDrill: true,

      allowTableView: true,

      allowFilters: true,

      allowChartPicker: true

    }

  }).intoElementWithId(“my - chart”);

</script>

</body>

<html>

Seguimiento de las tarjetas integradas públicamente

Puede realizar un seguimiento de todas las tarjetas integradas públicamente en la instancia de Domo en Configuración del administrador > Domo Everywhere. Puede consultar información como el autor de la integración, el estado actual del vínculo de integración (público o deshabilitado), el número de visitas públicas, etc. Debe tener un rol de seguridad de "Administrador" o un rol personalizado con el privilegio "Integrar tarjetas" habilitado para ver esta pestaña. Para obtener más información, consulte Diseño de configuración del administrador: pestaña Domo.  

Habilitar Domo Embed

Para habilitar esta característica, un usuario con un rol de seguridad predeterminado de "Administrador" o un rol personalizado con el privilegio "Integrar tarjetas" habilitado debe ir a Configuración del administrador > Configuración de la empresa > Resumen de la empresa y, a continuación, marcar la casilla Insertar tarjetas públicamente.

Nota: Esta es una versión de prueba gratuita de 30 días. Al final de los 30 primeros días de uso, el representante de la cuenta de Domo se pondrá en contacto con usted para informarle sobre los precios.