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:

Weld embed dialog

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

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

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).

Including the Weld script with Google Tag Manager

You can include the tag with with Google Tag Manager if you want.

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.

Do you want to learn more about Weld?