Vev Help Center
Search…
Embedding Data Visualization
Add third-party data visualization to your project.
With the support of third-party platforms, you can add data visualization to your project, bringing a whole new level of interactive content to your design.
In this lesson, we will look at:
  1. 1.
    How to embed visual data using our Flourish integrated elements
  2. 2.
    How to embed other service providers onto your project

Adding Visual Data Using Flourish

Navigate to the Add Menu (shortcut M) and select or search for the Flourish or Flourish Scroll Stories elements then click-n-drag onto your canvas.

Flourish Element

The Flourish element allows you to embed your Flourish project. This element is responsive and will allow you to set the frame dimensions of your chosen project.
To add a Flourish element:
  • Navigate to the Add Menu
  • Click and drag the element onto your canvas
  • Double click on the Flourish element to paste in your project's URL

Flourish Scrollytelling

Within the Flourish element, you can also enable scrollytelling. This will only work for Flourish Stories projects.
To enable scrollytelling:
  • Add your Flourish project as per the steps above
  • Double click on the Flourish element and toggle 'Enable scrollytelling'
  • Specify how many slides are within the project to allow scrollytelling
For more information about Flourish Stories, you can visit their support article.

Alternative Embedding Options

There are also other methods of embedding Flourish Projects to your page. To do this you will need to use the Embed Anything element.
To add an Embed Anything element:
  • Navigate to the Add Menu
  • Click and drag the element onto your canvas
  • Double click on the Embed Anything element to paste in your HTML embed code
    To get your embed code from Flourish:
  • Publish your project
  • Click 'Export & Publish' in the top right corner, and then β€œPublish to share and embed”
  • Here you will find the embed code that you can copy and paste into the Embed Anything element within your Vev project
More documentation on embedding Flourish projects can be found on their support page.

Adding Visual Data Using Other Third-Party Providers

There are a variety of different service providers that allow you to embed visual data onto web pages. Below is a list of popular providers. If your chosen provider is not listed below, please visit their website. Most providers will have documentation on how to embed their forms via their support/help pages.
Note: Some services providers use iframes for their embed codes. An IFrame (Inline Frame) is an HTML document embedded inside another HTML document on a website. Because of this, you will need to change the design of the form via the provider's embed options.

Tableau

Get the embed code provided with a view:
  1. 1.
    Sign in to Tableau​
  2. 2.
    Click the Share button at the top of a view. (The Share button doesn't appear in embedded views if you change the showShareOptions parameter to false in the code.)
    ​
    ​
  3. 3.
    Click Copy Embed Code
    ​
    ​
  4. 4.
    Paste the embed form code into the Embed Anything element within your Vev project
More documentation on embedding Tableau views can be found on their support page.

Google Data Studio

  1. 1.
    Sign in to Data Studio​
  2. 2.
    Edit the report you want to embed
  3. 3.
    • For a public report, use the link-sharing options "Public on the web" or "Anyone with the link can view"
    • For a private report, enter one or more users or Google Groups
    • Google Workspace users: To limit the report to users in your domain, turn link sharing on and select the "Anyone at [domain] with the link can view"
  4. 4.
    Select File > Embed report, or in the upper right, click **<>.
  5. 5.
    Click Enable embedding. A dialog box appears:
    ​
  6. 6.
    Ensure that the Embed Code option is selected. The iframe code appears in the text area below.
  7. 7.
    (Optional) Adjust the size of the iframe using the width and height controls
  8. 8.
    Click Copy to Clipboard
  9. 9.
    Paste the embed form code into the Embed Anything element within your Vev project
More documentation on embedding Google Data Studio can be found on their support page.
Last modified 1mo ago