website logo
➡️ purplepublish.com
Overview
Support
Setup
Editorial
Experience
Growth
Developers
Navigate through spaces
⌘K
Purple Experience
Views
Widget Component
Generic Widget
Structure of Dynamic resources
experience.config
Configure recurring texts in the messages.json
Purple Experience Builder
Using the Purple Experience Builder
Update your Purple Experience Version
Edit 'dynamic resources' from Purple Manager
Edit 'dynamic resources' in Experience Builder
Deploy Resources to Multiple Brands
Experience Builder Pipelines
Basic Experience Set-up
App onboarding configuration
Configure SEO attributes
Configure Error Pages
Configure the Side Menu in the Purple Experience
Configure a login page in Experience Builder
App menu configuration in Dynamic Resources
Configure the feedback email in the app with Experience Builder
Configure a coupon code page in Experience Builder
Configure a custom domain
Branding of your Experience
Experience Styling
Change the brand logo in the HTML Experience with Experience Builder
Configure brand colours in the HTML Experience with Experience Builder
Deposit a font in the HTML Experience with Experience Builder
Configure legal information pages in Experience Builder
Builder Pipelines Architecture Info
Simple static ads in Experience
Traffective ads in Experience
Action URLs and Deep linking
List of Action URLs
Deep linking
Migration
Docs powered by
Archbee
Widget Component

Generic Widget

10min

Purple Experience



Summary

The Purple Experience employs a range of implemented components (such as issue, list, etc.) to assist users in effortlessly constructing the application by configuring these components in the dynamic resources. However, there are instances when it becomes necessary to directly incorporate entire widgets from third-party sources onto the page. In such cases, the integration of these widgets is only achievable through the utilization of the Experience Widget Component.

Learn how to Configure a generic widget.



Generic-widget.json

In the Generic-widget.json, you configure the widget library for your project. Each library can contain one or multiple widgets.

Structure

Widget Library

The widget library contains the list of widgets from the same 3rd party provider (for example the brochure provider 'weekli')

Field

Description

name*

Specifies the name of the widget library

Widgets*

Specifies a list of widgets to be utilized in the Experience.

Resources

Specifies a list of global resources. These resources are loaded whenever any widget from the same library is loaded in the view.

* = required field

Widget Element

Field

Description

html*

Specifies the name of the widget library

Resources*

Specifies a list of resources that are loaded exclusively when their corresponding widget is loaded within the view.

* = required field

Resource

Field

Description

type*

It can either be a script or a style.

url

The URL of the resource

content

The content of the HTML element

placement

It can be placed either in the body or the head of the HTML page. The placement won't make a difference if the position value is just_before_element/just_after_element

position

It can be positioned either at the top or the bottom of the placement (body/head), as well as before (just_before_element) or after (just_after_element) the widget's HTML.

properties

all properties that we can find in the HTML element

* = required field

The configuration is based on the widget config provided by the 3rd party provider.

Example

<div id="weekli-widget-113" class="weekli-widget" style="position:relative;width:auto;height:240px;"
  data-key="02B737F6-0D1F-4D1A-8F5B-7C75A06D306D" data-slot="113" data-config="293" data-host="demo-zeitung.weekli.de"
  data-region="muc-schwa"> </div>
<script async src="https://static-nt.weekli.systems/static/widget/widget-loader-1.6.1.min.js"></script>


This is a widget from 'weekli' to be integrated. It contains an html div tag with a script. The script should be loaded after the html div tag.

The configuration within the "generic-widget.json" should resemble:

configuration within the 'generic-widget.json'




Updated 31 Aug 2023
Did this page help you?
PREVIOUS
Widget Component
NEXT
Configure a generic widget
Docs powered by
Archbee
TABLE OF CONTENTS
Summary
Generic-widget.json
Structure
Widget Library
Widget Element
Resource
Example
Docs powered by
Archbee
ImprintPrivacy Policy
© Sprylab Technologies GmbH 2023