Enqueing Showcase JS on a Wordpress Site

Vega
1

Hey All,

I’ve been testing using wordpress’ native enqueue scripts function to include the showcase javascript file in our wordpress functions file (wp_enqueue_script() – Function | Developer.WordPress.org). If you’re library website runs on wordpress this might also be useful for you.

 wp_enqueue_script( 'vega-showcase',  'https://vega-widgets.s3.us-east-2.amazonaws.com/vega-showcase-widget/prod/pendo-showcase-widget.js', array(), '1.0.0', array('strategy'  => 'defer',  ) );

Depending on your location the URL for the showcase javascript may be different. The value can be located in the embed code of any showcase (it’s listed in the srcdoc attribute).

Using this method will let you call the showcase directly into your website DOM and let you apply custom styles to elements.

Once the javascript is queued you can embed showcases using the following:

<vega-showcase-widget
        showcase-id="[SHOWCASE ID]"
        vega-host="[HOST]"
        display-amount="5"
        max-amount="20">
        </vega-showcase-widget>

Display-amount and max-amount only respect the options in the generate embed code from Vega (2-5 for display-amount, and 12-20 for max-amount).

Obviously this method will fail if something changes with the structure of Showcase embeds. But I also really hate iframes.

You can see it in action here: https://www.franklintwp.org/showcase-test/

1 Like