Embedding Weld content in another website
Weld allows you to embed interactive content on your existing website, similar to embedding a YouTube clip:
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:
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
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
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.