Embedding Weld content in another website

Weld allows you to embed interactive content on your existing website, similar to embedding a YouTube clip:

Embedding Weld content

Simple embedding (client-side)

To embed your content, click on Publish in the toolbar, then select Embed in the tab menu.

Then copy the HTML code from the gray box:

Embedding dialog

Paste the HTML code into your website CMS or blog admin system, and it should be visible on your website.

Note that the embed script has two parts: first a <div> which is the placeholder for the content – use one of these for each content blocks that you need. Then there is a <script> tag – you only need one of these on your page.

Using Google Tag Manager

You can embed the <script> part of the Simple embedding script using Google Tag Manager. This makes the integration process even smoother, but adds a slight performance penalty since it’s a client-side script loading another script.

Native (backend) embedding

Weld content can also be rendered server-side and embedded on the backend for increased performance. We have native plug-ins for several CMS/e-commerce platforms including Episerver.

Search engines and SEO

The Weld embed code is SEO optimized which means that search engines such as Google will interpret all embedded content as part of the host website. This is achieved with a so called “Friendly IFrame” technique.

Page loading speed

All Weld content is stored as static HTML/CSS with a small JavaScript library to power animations etc. The content is stored on content delivery networks (CDN’s) with local nodes all over the world.

When used with simple embedding (client-side), a small JavaScript library is loaded when the page is loaded. This library then renders the Weld content. For maximum performance we recommend native (backend) embedding (see above).

Embedding multiple Weld objects on the same page

If you want to embed multiple Weld objects on the same page, that is just fine. Note that you only need to include the <script> tag once (but the <div> is used to indicate where the content should be embedded).

How quickly is content updated?

The embedded Weld content is updated within a few seconds after changing things in the Weld editor.

Options for embedding

DIV tag attributes:

  • data-weld-project: either a project ID (e.g. data-weld-project=”-KyRFwCbJdfKGmnpkyy-“) or a project slug (e.g. data-weld-project=”slug:annas-project-2”).
  • data-weld-screen: either a screen ID (e.g. data-weld-screen=”-KyRFwCbJdfKGmnpkyy-“) or a screen slug (e.g. data-weld-screen=”slug:screen-1”).
  • data-weld-version: set to “2” to use the new Weld Page Renderer v2 with server-side rendering (SSR). Note: slugs for project and screens are not supported with v2, use ID’s only.

Script query string:

  • key: Your user key (ID). It is provided automatically when you use the Publish → Embed dialog.