Sharing embedded drawings across sites (Video)

Posted on: Tue, 10/30/2018 - 11:36 By: kpv

The article continues the series started with Creating interactive content in CKEditor with VisualN Embed article.

It shows how to use IFrames toolkit provided with VisualN module to share embedded drawings across sites.

For our example we use a Drupal 8 site as drawings origin and a Wordpress site as a target resource exposing those drawings. The Wordpress site can be located at any domain and/or server and doesn't depend on the origin in any way.

There are a couple of use cases when you might want to share drawings:

  • to share content with you audience to promote your brand, attract new users (generate quality traffic) or spread your data / knowledge across the Internet
  • to create SaaS-like solutions when users use your site to create content and reuse on their sites (e.g. Flickr)
  • to use it as a backend platform for your other resource (as in the video above, Drupal 8 can be used as a backend for Wordpress)

Generating quality traffic, promoting brand, spreading knowledge

Any shared drawing can be configured to show origin link near (at the bottom by default) the drawing.

Origin links allow to attract new target users from third-party sites. Clicking that link user is redirected to the origin site. Of course, you can't oblige users to click those links, so the user should want or find it useful (e.g. for some additional info) to click it. That makes it fair to expect that mostly target users will click the link under shared content. And thus generate quality traffic.

You can also manage which pages exactly to direct those users to, per drawing basis or multiple at once (using tokens* or relying on defaults). It allows you to better run marketing campaigns, e.g. to temporarily switch shared drawings to direct traffic to a specific page of interest. Also no restrictions are placed upon link url, it may even point to a different site, which allows you to share traffic.
Usually origin page url (i.e. the page where drawings appears) is used by default.

Though it is not always necessary for user to click the link to achieve your goals. Sometimes just showing the content is enough. E.g. when content is obviously related to your brand, it already accomplishes its promoting functions. Or if you want just to share some knowledge (e.g. plastic waste amounts in oceans dynamics), then its still enough that user just reads it. And of course someone should also want to share your content.

These and some other ideas (including those presented below) served as a foundation and composed the notion of Fidelity Marketing, something that can be seen as another branch of Internet Marketing (along with Content and Referral marketing). The concept is developed and promoted within the scope of VisualN Project.

* There are still tasks to do for better tokens support

Creating SaaS-like solutions

With the IFrames toolkit you can build solutions the primary purpose of which is to provide some service to users. There are a lot of such services on the Internet - some of them allow to share images (e.g. Flickr), slides presentations (e.g. Slideshare), data visualizations etc. Now you can build yours of any of these and other types or invent something different.

Also you can add such functionality to an already existing site which would add additional value to it and its users.

Using as a backend for some other resource

Imagine that you or your client (if you are a developer) owns a site made on some other framework or CMS.

When using Drupal with VisualN along with your primary site (if not D8), all embedded content is at one place and belong to your infrastructure, so you don't depend on third-party services providing similar services (e.g. charts or galleries), also it allows to use such solutions in internal, e.g. corporate systems without need to access Internet.

On the other hand VisualN is a general purpose graphical content authoring and sharing framework and can replace multiple other solutions having more specific implementation area.

Configuration details and Sharing settings

As mentioned before, the sharing functionality is provided by VisualN module, namely with VisualN IFrame submodule. At the moment it supports sharing for embedded drawings and drawings created as generic Drupal blocks, provided by VisualN Block submodule (which goes beyond the subject of the current article).

When enabling sharing, you have some options to configure. The following settings are available.

Use defaults - the defaults are set on IFrame settings page. Allows shared drawings to reuse global IFrame settings without saving locally for each single one. Useful to change settings for multiple shared drawings at once.

Show origin link - whether or not to show origin link at the bottom of shared drawings.

Origin url - by default current drawing page url is used. Though you can use some custom page for a specific drawing iframe as origin.

Origin title - you can set any title for the link to appear under the shared drawing. Of course, you can override shared drawing template to change its style or use an image instead of the origin link, e.g. origin site logo.

Open in new window - whether shared drawings links should open origin site in a new window or not.


These are just some obvious implementations of IFrames toolkit, you are encouraged to develop yours. Also the subject itself is relatively new to Drupal ecosystem since there were no noticeable attempts to create a such. As well as for other popular Content Management Systems.

Contents of the series

  1. Getting started
  2. Using available drawers preview
  3. Creating visualization styles
  4. Creating drawing (entity) types
  5. Creating interactive content in CKEditor with VisualN Embed
  6. Configuring VisualN Embed integration with CKEditor
  7. Using VisualN Excel module for Excel files support
  8. Sharing embedded drawings across sites
  9. etc.

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
CAPTCHA This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.