Using integrations in your projects

There are numerous integrations that you can use in your Infogram projects. Add YouTube or Vimeo videos, content from Slideshare, images from Flickr, GIFs, URLs, iframes, and various data integrations. Read more about the available options in the article below.

Read through the article below and see how to:

YouTube, Vimeo, Slideshare, Flickr

  1. When the Integrations sidebar is open, select whether you wish to use a YouTube or a Vimeo video, a Slideshare presentation, or an image from Flickr in your project.
  2. After clicking on the thumbnail, paste the URL of the content you wish to use or use the search bar to look for something specific.
  3. Once you've found the content you would like to use, click on its thumbnail or drag it onto the canvas.
  4. You can resize the content to your liking on the canvas.
    YouTube_integration.gif

Add a URL

You can add URL integrations to your projects. They provide a short description of the respective page and give a direct clickable link.

  1. When the Integrations sidebar is open, select the option to add a URL.
  2. Paste the URL in the pop-up window and click Insert. This will add a resizable URL box to your project.

    URL_integration.gif

Add a GIF

  1. Select the GIF option in the Integrations sidebar.
  2. Look for the GIF you want to use with the help of the search bar.
  3. Add the GIF to your project by clicking on it or dragging it onto the canvas. You can resize the GIF to your liking on the canvas.

Use an iframe

You can also embed iframes into Infogram projects. This can be a form (Google and Typeform), a map (Google maps), your website, etc. Keep in mind that codes containing javascript will not be accepted.

  1. Look for an iframe link that you could use in Infogram. E.g., in Google Maps, an iframe link can be accessed in the settings panel under Share or embed a map.
  2. Copy the HTML code. Go to Infogram and paste the code in the iframe box.
  3. Click Insert, and the iframe will appear on the canvas. You can then resize it to your needs.

    Iframe.gif

Source data from databases

There are a few SQL integrations available: MySQL, PostgreSQL, Amazon Redshift, Oracle, and Microsoft SQL Server. These integrations require basic knowledge of handling data from the preferred source.

 
Note: MySQL 8.0 servers must use mysql_native_password authentication plugin for connection.

In the Integrations sidebar, select the database you wish to connect, then fill out the form:

  • Hostname(URI) or IP: If you want to make sure this integration is secure, you can restrict access to these IP addresses: 63.33.112.231, 34.254.41.145, 34.255.12.210. We are going to connect to your database from one of these addresses, so make sure they are whitelisted.
  • Port number  
  • Database name
  • Username
  • Password
  • If your database supports SSL connections, we suggest you check the SSL checkbox in the app for that database. We recommend that you use this setting to make sure the data is not transmitted in plain-text.
 
Note: It is not possible to edit fields in the form after connecting the database. To do that, you will have to add the integration once again.

You can find two examples of database queries in this project.

Integrations automatically create live, dynamic charts, and maps. An update will happen every time you open the project in 1) the editor 2) the webview 3) or your website where it is embedded. At that moment, a request for data will be sent to Infogram, then to your database, which will provide new data.

To disconnect the database:

  1. Double-click the chart or map to access the Edit data tab in the settings panel on the right.
  2. Click on Disconnect just above the data table to remove the connection. 

Other options

Read the article on creating live-updating charts and maps to see how you can connect Google Drive documents and JSON feeds to your projects.