Embedding External Reports in Your Client Portal

While we have direct integrations with SERP Robot and SERP Book for SEO reporting, you may want to embed other reports such as BrightLocal, or your own Google Data Studio report in your Client Panel.

Here’s how to do it.

Step 1: Create a field for report URL

You’ll need to save the report URL in your customer’s account. Go to Settings > CRM fields and create a new field called “Report URL”. To prevent clients from editing the field’s value you can uncheck the “Show field in client profile” option (it will still be editable by your team).

Note the field ID (1 in the example above) as we’ll need it later.

Step 2: Create a new page

We need a custom page to show the report. Go to Settings > Client panel templates and create a new page called “report”. Paste the code below in the page contents:

{% extends ajax ? "layout_ajax.html" : "clients/layout.html" %}

{% block content %}
    {% if user.custom_fields.1 %}
        <iframe src="{{ user.custom_fields.1 }}"></iframe>
    {% else %}
        <div class="well">Report isn't available</div>
    {% endif %}
{% endblock %}

Make sure to replace 1 in the user.custom_fields property to match the custom field’s ID where report link is stored.

Step 3: Update the layout template

We need to set the page body to full-height in order to make the embedded iframe full height. Go to Settings > Templates > public/layout.html and add the following line at the very top of the file:

{% set body_class = 'full-height' %}

Go to Settings > Client Panel menus and add a new sidebar link to the report. Use the dropdown next to the Link URL option to select your new Report page.

To show a menu link only if the user has a report available you’ll need to update the clients/sidebar.html template.

Find this line:

{% for item in items %}

And replace it with:

{% for item in items|filter(item => 
    item.link != '/portal/page/report' or
    user.custom_fields.1)
%}

The above code shows all menu items except the report link, unless user has a custom field set with the report URL.

Step 5: Enable embedding in your report

Depending on what you are looking to embed, you might need to enable embedding, like in this example for Google Data Studio:

Now you can update a client’s account with the report URL and sign in as the client to see how it looks.

Updated over a month ago

Thanks for your feedback 🙏

Was this helpful?