diff --git a/.rubocop.yml b/.rubocop.yml
index acacb21dda..071067c935 100644
--- a/.rubocop.yml
+++ b/.rubocop.yml
@@ -1,5 +1,5 @@
 AllCops:
-  TargetRubyVersion: 2.3
+  TargetRubyVersion: 2.5
 
 # Use double quotes only for interpolation.
 Style/StringLiterals:
diff --git a/app/assets/stylesheets/pageflow/editor/info_box.scss b/app/assets/stylesheets/pageflow/editor/info_box.scss
index f5ca556968..22ba07da95 100644
--- a/app/assets/stylesheets/pageflow/editor/info_box.scss
+++ b/app/assets/stylesheets/pageflow/editor/info_box.scss
@@ -3,6 +3,13 @@
     margin-bottom: 1em;
   }
 
+  &.error {
+    color: var(--ui-on-error-surface-color);
+    background-color: var(--ui-error-surface-color);
+    border-radius: rounded();
+    padding: space(3);
+  }
+
   .shortcuts {
     dt {
       display: block;
diff --git a/app/assets/stylesheets/pageflow/ui/forms.scss b/app/assets/stylesheets/pageflow/ui/forms.scss
index ebb0fd7100..305aaa105e 100644
--- a/app/assets/stylesheets/pageflow/ui/forms.scss
+++ b/app/assets/stylesheets/pageflow/ui/forms.scss
@@ -219,7 +219,7 @@ textarea.short {
   text-decoration: underline;
 }
 
-.input-hidden_via_binding {
+.hidden_via_binding {
   display: none;
 }
 
diff --git a/entry_types/scrolled/app/helpers/pageflow_scrolled/editor/entry_json_seed_helper.rb b/entry_types/scrolled/app/helpers/pageflow_scrolled/editor/entry_json_seed_helper.rb
index 01fe9bc764..cb7d45ee73 100644
--- a/entry_types/scrolled/app/helpers/pageflow_scrolled/editor/entry_json_seed_helper.rb
+++ b/entry_types/scrolled/app/helpers/pageflow_scrolled/editor/entry_json_seed_helper.rb
@@ -8,7 +8,10 @@ module EntryJsonSeedHelper
 
       def scrolled_entry_editor_json_seed(json, scrolled_entry)
         json.key_format!(camelize: :lower)
-        scrolled_entry_editor_legacy_typography_variants_seed(json, scrolled_entry)
+        entry_config = Pageflow.config_for(scrolled_entry)
+
+        scrolled_entry_editor_legacy_typography_variants_seed(json, entry_config)
+        scrolled_entry_editor_consent_vendor_host_matchers_seed(json, entry_config)
 
         scrolled_entry_json_seed(json,
                                  scrolled_entry,
@@ -19,14 +22,21 @@ def scrolled_entry_editor_json_seed(json, scrolled_entry)
 
       private
 
-      def scrolled_entry_editor_legacy_typography_variants_seed(json, scrolled_entry)
+      def scrolled_entry_editor_legacy_typography_variants_seed(json, entry_config)
         json.legacy_typography_variants(
-          Pageflow
-            .config_for(scrolled_entry)
+          entry_config
             .legacy_typography_variants
             .deep_transform_keys { |key| key.to_s.camelize(:lower) }
         )
       end
+
+      def scrolled_entry_editor_consent_vendor_host_matchers_seed(json, entry_config)
+        json.consent_vendor_host_matchers(
+          entry_config
+            .consent_vendor_host_matchers
+            .transform_keys { |regexp| regexp.inspect[1..-2] }
+        )
+      end
     end
   end
 end
diff --git a/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_consent_vendors.json.jbuilder b/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_consent_vendors.json.jbuilder
new file mode 100644
index 0000000000..0cffece34c
--- /dev/null
+++ b/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_consent_vendors.json.jbuilder
@@ -0,0 +1,16 @@
+content_element_vendors =
+  entry_config.content_element_consent_vendors.by_content_element_id(entry)
+
+json.content_element_consent_vendors(content_element_vendors)
+
+I18n.with_locale(entry.locale) do
+  json.consent_vendors do
+    json.array!(content_element_vendors.values.uniq) do |name|
+      json.name name
+      json.display_name t("pageflow_scrolled.consent_vendors.#{name}.name")
+      json.description t("pageflow_scrolled.consent_vendors.#{name}.description")
+      json.opt_in_prompt t("pageflow_scrolled.consent_vendors.#{name}.opt_in_prompt")
+      json.paradigm 'lazy opt-in'
+    end
+  end
+end
diff --git a/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_entry.json.jbuilder b/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_entry.json.jbuilder
index 23d3e17f37..f11263922d 100644
--- a/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_entry.json.jbuilder
+++ b/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_entry.json.jbuilder
@@ -39,6 +39,9 @@ json.config do
            self,
            include_unused: options[:include_unused_additional_seed_data])
   )
+
+  json.partial! 'pageflow_scrolled/entry_json_seed/consent_vendors',
+                entry: entry, entry_config: entry_config
 end
 
 unless options[:skip_i18n]
diff --git a/entry_types/scrolled/config/locales/new/iframe_consent.de.yml b/entry_types/scrolled/config/locales/new/iframe_consent.de.yml
new file mode 100644
index 0000000000..8529354036
--- /dev/null
+++ b/entry_types/scrolled/config/locales/new/iframe_consent.de.yml
@@ -0,0 +1,16 @@
+de:
+  pageflow_scrolled:
+    editor:
+      content_elements:
+        iframeEmbed:
+          attributes:
+            requireConsent:
+              label: "Datenschutz-Einwilligung aktivieren"
+              inline_help: |-
+                iframe erst laden, nachdem Besucher der
+                Datenverarbeitung durch die eingebettete Seite
+                zugestimmt hat.
+          help_texts:
+            missingConsentVendor: |-
+              Für den Anbieter der angegeben URL stehen keine
+              Datenschutzangaben zur Verfügung.
diff --git a/entry_types/scrolled/config/locales/new/iframe_consent.en.yml b/entry_types/scrolled/config/locales/new/iframe_consent.en.yml
new file mode 100644
index 0000000000..1fa8082a1b
--- /dev/null
+++ b/entry_types/scrolled/config/locales/new/iframe_consent.en.yml
@@ -0,0 +1,15 @@
+en:
+  pageflow_scrolled:
+    editor:
+      content_elements:
+        iframeEmbed:
+          attributes:
+            requireConsent:
+              label: "Display privacy opt-in"
+              inline_help: |
+                Only load iframe after the visitor has given
+                consent to the data processing by the embedded page.
+          help_texts:
+            missingConsentVendor: |-
+              No privacy policy information available for the provider
+              of the given URL.
diff --git a/entry_types/scrolled/lib/pageflow_scrolled/configuration.rb b/entry_types/scrolled/lib/pageflow_scrolled/configuration.rb
index abd537a7c6..bfe220f605 100644
--- a/entry_types/scrolled/lib/pageflow_scrolled/configuration.rb
+++ b/entry_types/scrolled/lib/pageflow_scrolled/configuration.rb
@@ -44,6 +44,44 @@ class Configuration
     # @since 15.7
     attr_reader :additional_frontend_seed_data
 
+    # Determine which vendors a content element will require consent
+    # for. Based on the vendor name returned here, the following
+    # translations will be used in consent UI components.
+    #
+    #     pageflow_scrolled.consent_vendors.#{name}.name
+    #     pageflow_scrolled.consent_vendors.#{name}.description
+    #     pageflow_scrolled.consent_vendors.#{name}.opt_in_prompt
+    #
+    # @example
+    #
+    #     config.content_element_consent_vendors.register(
+    #       lambda |configuration:| do
+    #         if configuration['provider'] == 'youtube'
+    #           'youtube'
+    #         else
+    #           'vimeo'
+    #         end
+    #       end,
+    #       content_element_type_name: 'videoEmbed'
+    #     )
+    #
+    # @return [ContentElementConsentVendors]
+    # @since edge
+    attr_reader :content_element_consent_vendors
+
+    # Mapping from URL hosts to consent vendor names. Used for iframe
+    # embed opt-in.
+    #
+    # @exmaple
+    #
+    #     entry_type_config.consent_vendor_host_matchers = {
+    #       /\.some-vendor\.com$/ => 'someVendor'
+    #     }
+    #
+    # @return [Hash<RegExp, String>]
+    # @since edge
+    attr_accessor :consent_vendor_host_matchers
+
     # Migrate typography variants to palette colors. Before palette
     # colors for text blocks and headings were introduced, it was
     # already possible to color text by defining typography variants
@@ -104,6 +142,8 @@ def initialize(*)
       @additional_editor_packs = AdditionalPacks.new
 
       @additional_frontend_seed_data = AdditionalSeedData.new
+      @content_element_consent_vendors = ContentElementConsentVendors.new
+      @consent_vendor_host_matchers = {}
 
       @legacy_typography_variants = {}
     end
diff --git a/entry_types/scrolled/lib/pageflow_scrolled/content_element_consent_vendors.rb b/entry_types/scrolled/lib/pageflow_scrolled/content_element_consent_vendors.rb
new file mode 100644
index 0000000000..dfa94a7e83
--- /dev/null
+++ b/entry_types/scrolled/lib/pageflow_scrolled/content_element_consent_vendors.rb
@@ -0,0 +1,38 @@
+module PageflowScrolled
+  # Register consent vendors based on content element configuration
+  # data.
+  class ContentElementConsentVendors
+    # @api private
+    def initialize
+      @callables = {}
+    end
+
+    # Register callable to determine consent vendor from configuration
+    # attributes for a content element type.
+    #
+    # @param callable [#call]
+    #   Receives configuration keyword argument and returns
+    # @param content_element_type_name [String]
+    def register(callable, content_element_type_name:)
+      @callables[content_element_type_name] = callable
+    end
+
+    # @api private
+    def by_content_element_id(entry)
+      content_elements_with_consent_vendor(entry).each_with_object({}) { |content_element, result|
+        next unless @callables[content_element.type_name]
+
+        result[content_element.id] = @callables[content_element.type_name].call(
+          entry: entry,
+          configuration: content_element.configuration
+        )
+      }.compact
+    end
+
+    private
+
+    def content_elements_with_consent_vendor(entry)
+      ContentElement.all_for_revision(entry.revision).where(type_name: @callables.keys)
+    end
+  end
+end
diff --git a/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb b/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb
index 08014b405b..f5327bb64e 100644
--- a/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb
+++ b/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb
@@ -32,9 +32,27 @@ def configure(config)
           'frontendVersion',
           FRONTEND_VERSION_SEED_DATA
         )
+
+        c.content_element_consent_vendors.register(
+          IFRAME_EMBED_CONSENT_VENDOR,
+          content_element_type_name: 'iframeEmbed'
+        )
       end
     end
 
+    IFRAME_EMBED_CONSENT_VENDOR = lambda do |configuration:, entry:, **|
+      return unless configuration['requireConsent']
+
+      uri = URI.parse(configuration['source'])
+      host_matchers = Pageflow.config_for(entry).consent_vendor_host_matchers
+
+      host_matchers.detect do |matcher, _|
+        uri.host =~ matcher
+      end&.last
+    rescue URI::InvalidURIError
+      nil
+    end
+
     FRONTEND_VERSION_SEED_DATA = lambda do |request:, entry:, **|
       if request.params[:frontend] == 'v2' || entry.feature_state('frontend_v2')
         2
diff --git a/entry_types/scrolled/package/spec/editor/models/ConsentVendors-spec.js b/entry_types/scrolled/package/spec/editor/models/ConsentVendors-spec.js
new file mode 100644
index 0000000000..3d9bdc6dec
--- /dev/null
+++ b/entry_types/scrolled/package/spec/editor/models/ConsentVendors-spec.js
@@ -0,0 +1,18 @@
+import {ConsentVendors} from 'editor/models/ConsentVendors';
+
+describe('ConsentVendors', () => {
+  describe('fromUrl', () => {
+    it('detects vendor from seed data host matcher', () => {
+      const consentVendors = new ConsentVendors({
+        hostMatchers: {
+          '\\.some-vendor.com$': 'someVendor'
+        }
+      });
+
+      expect(consentVendors.fromUrl('https://foo.some-vendor.com/abc'))
+        .toEqual('someVendor');
+      expect(consentVendors.fromUrl('https://other.com/abc'))
+        .toBeUndefined();
+    });
+  })
+})
diff --git a/entry_types/scrolled/package/spec/entryState/consentVendors-spec.js b/entry_types/scrolled/package/spec/entryState/consentVendors-spec.js
new file mode 100644
index 0000000000..9c89f9eb3f
--- /dev/null
+++ b/entry_types/scrolled/package/spec/entryState/consentVendors-spec.js
@@ -0,0 +1,33 @@
+import {useContentElementConsentVendor} from 'entryState';
+
+import {renderHookInEntry} from 'support';
+
+describe('useContentElementConsentVendor', () => {
+  it('reads data from seed', () => {
+    const {result} = renderHookInEntry(
+      () => useContentElementConsentVendor({contentElementId: 10}), {
+        seed: {
+          consentVendors: [{name: 'someVendor', displayName: 'Some Vendor'}],
+          contentElementConsentVendors: {10: 'someVendor'},
+          contentElements: [{id: 10}]
+        }
+      }
+    );
+
+    const data = result.current;
+    expect(data).toMatchObject({name: 'someVendor', displayName: 'Some Vendor'});
+  });
+
+  it('returns undefined if content element does not have consent vendor', () => {
+    const {result} = renderHookInEntry(
+      () => useContentElementConsentVendor({contentElementId: 1}), {
+        seed: {
+          contentElements: [{id: 1}]
+        }
+      }
+    );
+
+    const data = result.current;
+    expect(data).toBeUndefined();
+  });
+});
diff --git a/entry_types/scrolled/package/spec/frontend/features/thirdPartyConsent-spec.js b/entry_types/scrolled/package/spec/frontend/features/thirdPartyConsent-spec.js
index e9028fed72..485be1e1b5 100644
--- a/entry_types/scrolled/package/spec/frontend/features/thirdPartyConsent-spec.js
+++ b/entry_types/scrolled/package/spec/frontend/features/thirdPartyConsent-spec.js
@@ -58,6 +58,33 @@ describe('Third party consent', () => {
   });
 
   describe('vendor registration', () => {
+    it('registers content element vendors from config seed', async () => {
+      const consent = Consent.create();
+      jest.spyOn(consent, 'registerVendor');
+
+      await renderEntry({
+        consent,
+        seed: {
+          themeOptions: {thirdPartyConsent: {cookieName: 'optIn'}},
+          consentVendors: [
+            {
+              name: 'someVendor',
+              displayName: 'Some Vendor',
+              paradigm: 'lazy opt-in'
+            }
+          ]
+        }
+      });
+
+      expect(consent.registerVendor).toHaveBeenCalledWith(
+        'someVendor',
+        expect.objectContaining({
+          displayName: 'Some Vendor',
+          paradigm: 'lazy opt-in'
+        })
+      )
+    });
+
     it('relies on required vendors reported by content elements', async () => {
       const consent = Consent.create();
 
@@ -313,6 +340,76 @@ describe('Third party consent', () => {
     });
   });
 
+  describe('opt in with implicit provider name', () => {
+    beforeEach(() => {
+      frontend.contentElementTypes.register('test', {
+        component: function Component() {
+          return (
+            <div data-testid="test-content-element">
+              <ThirdPartyOptIn>
+                <div>Data from SomeService</div>
+              </ThirdPartyOptIn>
+            </div>
+          );
+        }
+      });
+    });
+
+    it('uses prompt from server rendered consent vendors', async () => {
+      const {getByTestId} = await renderEntry({
+        seed: {
+          themeOptions: {thirdPartyConsent: {cookieName: 'optIn'}},
+          contentElements: [{id: 10, typeName: 'test'}],
+          consentVendors: [{
+            name: 'someVendor',
+            optInPrompt: 'Enable Some Vendor?',
+            paradigm: 'lazy opt-in'
+          }],
+          contentElementConsentVendors: {10: 'someVendor'}
+        }
+      });
+
+      expect(getByTestId('test-content-element')).toHaveTextContent('Enable Some Vendor?');
+    });
+
+    it('is skipped if flag for provider is true in privacy cookie', async () => {
+      cookies.setItem('optIn', '{"someVendor": true}');
+
+      const {getByTestId} = await renderEntry({
+        seed: {
+          themeOptions: {thirdPartyConsent: {cookieName: 'optIn'}},
+          contentElements: [{id: 10, typeName: 'test'}],
+          consentVendors: [{
+            name: 'someVendor',
+            paradigm: 'lazy opt-in'
+          }],
+          contentElementConsentVendors: {10: 'someVendor'}
+        }
+      });
+
+      expect(getByTestId('test-content-element')).toHaveTextContent('Data from SomeService');
+    });
+
+    it('sets flag for provider in privacy cookie when consent is given', async () => {
+      const {getByTestId} = await renderEntry({
+        seed: {
+          themeOptions: {thirdPartyConsent: {cookieName: 'optIn'}},
+          contentElements: [{id: 10, typeName: 'test'}],
+          consentVendors: [{
+            name: 'someVendor',
+            paradigm: 'lazy opt-in'
+          }],
+          contentElementConsentVendors: {10: 'someVendor'}
+        }
+      });
+
+      const {getByText} = within(getByTestId('test-content-element'));
+      await click(getByText('Confirm'));
+
+      expect(JSON.parse(cookies.getItem('optIn'))).toMatchObject({'someVendor': true});
+    });
+  });
+
   describe('opt in with wrapper', () => {
     beforeEach(() => {
       frontend.contentElementTypes.register('test', {
@@ -507,6 +604,69 @@ describe('Third party consent', () => {
     });
   });
 
+  describe('opt out info with implicit provider name', () => {
+    beforeEach(() => {
+      frontend.contentElementTypes.register('test', {
+        component: function Component() {
+          return (
+            <div data-testid="test-content-element">
+              <ThirdPartyOptIn>
+                <ThirdPartyOptOutInfo />
+                <div>Data from SomeService</div>
+              </ThirdPartyOptIn>
+            </div>
+          );
+        }
+      });
+    });
+
+    it('is displayed when consent has been given and privacy link is set in theme options', async () => {
+      const {getByTestId} = await renderEntry({
+        seed: {
+          themeOptions: {
+            thirdPartyConsent: {
+              cookieName: 'optIn',
+              optOutUrl: 'https://example.com/privacy',
+            }
+          },
+          consentVendors: [{
+            name: 'someVendor',
+            paradigm: 'lazy opt-in'
+          }],
+          contentElementConsentVendors: {10: 'someVendor'},
+          contentElements: [{id: 10, typeName: 'test'}]
+        }
+      });
+
+      const {getByText} = within(getByTestId('test-content-element'));
+      await click(getByText('Confirm'));
+
+      expect(getByTestId('test-content-element')).toHaveTextContent('Click here to opt out');
+      expect(getByText('Click here')).toHaveAttribute('href', 'https://example.com/privacy');
+    });
+
+    it('is not displayed if consent has not been given', async () => {
+      const {getByTestId} = await renderEntry({
+        seed: {
+          themeOptions: {
+            thirdPartyConsent: {
+              cookieName: 'optIn',
+              optOutUrl: 'https://example.com/privacy',
+            }
+          },
+          consentVendors: [{
+            name: 'someVendor',
+            paradigm: 'lazy opt-in'
+          }],
+          contentElementConsentVendors: {10: 'someVendor'},
+          contentElements: [{id: 10, typeName: 'test'}]
+        }
+      });
+
+      expect(getByTestId('test-content-element')).not.toHaveTextContent('Click here to opt out');
+    });
+  });
+
   describe('opt out info with custom hiding logic', () => {
     beforeEach(() => {
       frontend.contentElementTypes.register('test', {
diff --git a/entry_types/scrolled/package/spec/support/__spec__/stories-spec.js b/entry_types/scrolled/package/spec/support/__spec__/stories-spec.js
index d8d58f2b03..71d5477e7d 100644
--- a/entry_types/scrolled/package/spec/support/__spec__/stories-spec.js
+++ b/entry_types/scrolled/package/spec/support/__spec__/stories-spec.js
@@ -129,7 +129,20 @@ describe('exampleStories', () => {
 
     expect(stories).toContainEqual(expect.objectContaining({
       title: 'Consent - Opt-In',
-      requireConsentOptIn: true
+      requireConsentOptIn: true,
+      seed: expect.objectContaining({
+        config: expect.objectContaining({
+          consentVendors: [
+            expect.objectContaining({name: 'test'})
+          ],
+          contentElementConsentVendors: {1000: 'test'}
+        }),
+        collections: expect.objectContaining({
+          contentElements: expect.arrayContaining([
+            expect.objectContaining({id: 1000})
+          ])
+        })
+      })
     }));
   });
 });
diff --git a/entry_types/scrolled/package/spec/support/stories.js b/entry_types/scrolled/package/spec/support/stories.js
index e6c8488574..63047a6106 100644
--- a/entry_types/scrolled/package/spec/support/stories.js
+++ b/entry_types/scrolled/package/spec/support/stories.js
@@ -245,17 +245,25 @@ function consentOptInStories({typeName, consent, baseConfiguration}) {
   return exampleStoryGroup({
     typeName,
     name: 'Consent',
-    requireConsentOptIn: true,
+    consentVendors: [
+      {
+        name: 'test',
+        optInPrompt: 'I agree with being shown this content.'
+      }
+    ],
     examples: [
       {
         name: 'Opt-In',
-        contentElementConfiguration: baseConfiguration
+        contentElementConfiguration: {
+          ...baseConfiguration,
+          ...consent.configuration
+        }
       }
     ]
   });
 }
 
-function exampleStoryGroup({name, typeName, examples, parameters, requireConsentOptIn}) {
+function exampleStoryGroup({name, typeName, examples, parameters, consentVendors}) {
   const defaultSectionConfiguration = {transition: 'scroll', backdrop: {image: '#000'}, fullHeight: false};
 
   const sections = examples.map((example, index) => ({
@@ -266,7 +274,12 @@ function exampleStoryGroup({name, typeName, examples, parameters, requireConsent
   const contentElements = examples.reduce((memo, example, index) => [
     ...memo,
     exampleHeading({sectionId: index, text: `${name} - ${example.name}`}),
-    {sectionId: index, typeName, configuration: example.contentElementConfiguration}
+    {
+      id: 1000 + index,
+      sectionId: index,
+      typeName,
+      configuration: example.contentElementConfiguration
+    }
   ], []);
 
   return sections.map((section, index) => ({
@@ -274,9 +287,17 @@ function exampleStoryGroup({name, typeName, examples, parameters, requireConsent
     seed: normalizeAndMergeFixture({
       sections: [section],
       contentElements: contentElements,
-      themeOptions: examples[index].themeOptions
+      themeOptions: examples[index].themeOptions,
+      consentVendors,
+      contentElementConsentVendors: consentVendors &&
+                                    contentElements
+                                      .filter(({id}) => id)
+                                      .reduce(
+                                        (memo, {id}) => ({...memo, [id]: consentVendors[0].name}),
+                                        {}
+                                      )
     }),
-    requireConsentOptIn,
+    requireConsentOptIn: !!consentVendors,
     parameters,
     cssRules: Object.entries(examples[index].themeOptions?.properties || {}).reduce(
       (result, [scope, properties]) => {
@@ -308,7 +329,13 @@ export function normalizeAndMergeFixture(options = {}) {
     ...seedFixture,
     config: mergeDeep(
       seedFixture.config,
-      {theme: {options: options.themeOptions || {}}}
+      {
+        theme: {
+          options: options.themeOptions || {}
+        },
+        consentVendors: options.consentVendors || [],
+        contentElementConsentVendors: options.contentElementConsentVendors || {}
+      }
     ),
     collections: {
       ...seedFixture.collections,
diff --git a/entry_types/scrolled/package/src/contentElements/iframeEmbed/IframeEmbed.js b/entry_types/scrolled/package/src/contentElements/iframeEmbed/IframeEmbed.js
index 3f69b30da3..296bde6e4a 100644
--- a/entry_types/scrolled/package/src/contentElements/iframeEmbed/IframeEmbed.js
+++ b/entry_types/scrolled/package/src/contentElements/iframeEmbed/IframeEmbed.js
@@ -5,6 +5,8 @@ import {
   ContentElementBox,
   ContentElementFigure,
   FitViewport,
+  ThirdPartyOptIn,
+  ThirdPartyOptOutInfo,
   useContentElementEditorState,
   useContentElementLifecycle,
   usePortraitOrientation,
@@ -37,15 +39,28 @@ export function IframeEmbed({configuration}) {
         <ContentElementBox>
           <ContentElementFigure configuration={configuration}>
             <FitViewport.Content>
-              {shouldLoad &&
-               <iframe className={classNames(styles.iframe,
-                                             styles[`scale-${configuration.scale}`])}
-                       title={configuration.title}
-                       src={configuration.source} />}
+              <ThirdPartyOptIn>
+                {shouldLoad &&
+                 <iframe className={classNames(styles.iframe,
+                                               styles[`scale-${configuration.scale}`])}
+                         title={configuration.title}
+                         src={configuration.source} />}
+              </ThirdPartyOptIn>
             </FitViewport.Content>
+            <OptOutInfo configuration={configuration} />
           </ContentElementFigure>
         </ContentElementBox>
       </FitViewport>
     </div>
   );
 }
+
+function OptOutInfo({configuration}) {
+  if (!configuration.requireConsent) {
+    return null;
+  }
+
+  return (
+    <ThirdPartyOptOutInfo />
+  );
+}
diff --git a/entry_types/scrolled/package/src/contentElements/iframeEmbed/editor.js b/entry_types/scrolled/package/src/contentElements/iframeEmbed/editor.js
index 03645e6957..e6bdd7a904 100644
--- a/entry_types/scrolled/package/src/contentElements/iframeEmbed/editor.js
+++ b/entry_types/scrolled/package/src/contentElements/iframeEmbed/editor.js
@@ -1,5 +1,7 @@
+import I18n from 'i18n-js';
 import {editor} from 'pageflow-scrolled/editor';
-import {TextInputView, SelectInputView} from 'pageflow/ui';
+import {InfoBoxView} from 'pageflow/editor';
+import {TextInputView, SelectInputView, CheckBoxInputView} from 'pageflow/ui';
 
 import pictogram from './pictogram.svg';
 
@@ -12,9 +14,19 @@ editor.contentElementTypes.register('iframeEmbed', {
   supportedPositions: ['inline', 'sticky', 'left', 'right'],
   supportedWidthRange: ['xxs', 'full'],
 
-  configurationEditor() {
+  configurationEditor({entry}) {
     this.tab('general', function() {
       this.input('source', TextInputView);
+      this.input('requireConsent', CheckBoxInputView);
+      this.view(InfoBoxView, {
+        level: 'error',
+        text: I18n.t(
+          'pageflow_scrolled.editor.content_elements.iframeEmbed.help_texts.missingConsentVendor'
+        ),
+        visibleBinding: ['source', 'requireConsent'],
+        visible: ([source, requireConsent]) =>
+          source && requireConsent && !entry.consentVendors.fromUrl(source),
+      });
       this.input('title', TextInputView);
       this.input('aspectRatio', SelectInputView, {
         values: aspectRatios
diff --git a/entry_types/scrolled/package/src/contentElements/iframeEmbed/stories.js b/entry_types/scrolled/package/src/contentElements/iframeEmbed/stories.js
new file mode 100644
index 0000000000..b5011e3bbe
--- /dev/null
+++ b/entry_types/scrolled/package/src/contentElements/iframeEmbed/stories.js
@@ -0,0 +1,23 @@
+import '../frontend';
+import {storiesOfContentElement} from 'pageflow-scrolled/spec/support/stories';
+
+storiesOfContentElement(module, {
+  typeName: 'iframeEmbed',
+  baseConfiguration: {
+    source: 'https://example.com',
+    caption: 'Some caption'
+  },
+  consent: {
+    configuration: {
+      requireConsent: true
+    }
+  },
+  variants: [
+    {
+      name: 'With Consent',
+      configuration: {
+        requireConsent: true
+      }
+    }
+  ]
+});
diff --git a/entry_types/scrolled/package/src/editor/models/ConsentVendors.js b/entry_types/scrolled/package/src/editor/models/ConsentVendors.js
new file mode 100644
index 0000000000..a525521d65
--- /dev/null
+++ b/entry_types/scrolled/package/src/editor/models/ConsentVendors.js
@@ -0,0 +1,11 @@
+export function ConsentVendors({hostMatchers}) {
+  return {
+    fromUrl(url) {
+      url = new URL(url);
+
+      return Object.entries(hostMatchers).find(([matcher]) =>
+        new RegExp(matcher).test(url.host)
+      )?.[1];
+    }
+  }
+}
diff --git a/entry_types/scrolled/package/src/editor/models/ScrolledEntry/index.js b/entry_types/scrolled/package/src/editor/models/ScrolledEntry/index.js
index 8141544ee3..6dbfdb9898 100644
--- a/entry_types/scrolled/package/src/editor/models/ScrolledEntry/index.js
+++ b/entry_types/scrolled/package/src/editor/models/ScrolledEntry/index.js
@@ -1,6 +1,7 @@
 import {Entry, editor} from 'pageflow/editor';
 import I18n from 'i18n-js';
 
+import {ConsentVendors} from '../ConsentVendors';
 import {ChaptersCollection, SectionsCollection, ContentElementsCollection} from '../../collections';
 import {ContentElement} from '../ContentElement';
 
@@ -10,6 +11,8 @@ import {deleteContentElement} from './deleteContentElement';
 
 export const ScrolledEntry = Entry.extend({
   setupFromEntryTypeSeed(seed) {
+    this.consentVendors = new ConsentVendors({hostMatchers: seed.consentVendorHostMatchers});
+
     this.contentElements = new ContentElementsCollection(seed.collections.contentElements);
     this.sections = new SectionsCollection(seed.collections.sections,
                                            {contentElements: this.contentElements});
diff --git a/entry_types/scrolled/package/src/entryState/consentVendors.js b/entry_types/scrolled/package/src/entryState/consentVendors.js
new file mode 100644
index 0000000000..5b12d210bf
--- /dev/null
+++ b/entry_types/scrolled/package/src/entryState/consentVendors.js
@@ -0,0 +1,8 @@
+import {useEntryStateConfig} from "./EntryStateProvider";
+
+export function useContentElementConsentVendor({contentElementId}) {
+  const config = useEntryStateConfig();
+  const vendorName = config.contentElementConsentVendors[contentElementId];
+
+  return config.consentVendors.find(vendor => vendor.name === vendorName);
+}
diff --git a/entry_types/scrolled/package/src/entryState/index.js b/entry_types/scrolled/package/src/entryState/index.js
index 62ec4cc792..809a04dfad 100644
--- a/entry_types/scrolled/package/src/entryState/index.js
+++ b/entry_types/scrolled/package/src/entryState/index.js
@@ -1,4 +1,5 @@
 export {useAdditionalSeedData} from './additionalSeedData';
+export {useContentElementConsentVendor} from './consentVendors';
 export {useShareProviders, useShareUrl} from './sharing';
 export {useEntryMetadata} from './metadata';
 export {
diff --git a/entry_types/scrolled/package/src/frontend/thirdPartyConsent/OptIn.js b/entry_types/scrolled/package/src/frontend/thirdPartyConsent/OptIn.js
index 998d46c83b..5bf5379f01 100644
--- a/entry_types/scrolled/package/src/frontend/thirdPartyConsent/OptIn.js
+++ b/entry_types/scrolled/package/src/frontend/thirdPartyConsent/OptIn.js
@@ -1,6 +1,8 @@
 import React, {useState} from 'react';
 import {useConsentGiven} from './hooks';
 import {useI18n} from '../i18n';
+import {useContentElementAttributes} from '../useContentElementAttributes';
+import {useContentElementConsentVendor} from '../../entryState';
 
 import styles from './OptIn.module.css';
 import OptInIcon from '../icons/media.svg';
@@ -25,7 +27,13 @@ import OptInIcon from '../icons/media.svg';
  */
 export function OptIn({children, providerName, wrapper, icon}) {
   const {t} = useI18n();
+  const {contentElementId} = useContentElementAttributes();
+  const contentElementConsentVendor = useContentElementConsentVendor({contentElementId});
+
+  providerName = providerName || contentElementConsentVendor?.name;
+
   const cookieMessage =
+    contentElementConsentVendor?.optInPrompt ||
     t(`pageflow_scrolled.public.third_party_consent.opt_in_prompt.${providerName}`);
   const [consentedHere, setConsentedHere] = useState(false);
   const [consentGiven, giveConsent] = useConsentGiven(providerName);
diff --git a/entry_types/scrolled/package/src/frontend/thirdPartyConsent/OptOutInfo.js b/entry_types/scrolled/package/src/frontend/thirdPartyConsent/OptOutInfo.js
index c84e40f5d2..8c40420e61 100644
--- a/entry_types/scrolled/package/src/frontend/thirdPartyConsent/OptOutInfo.js
+++ b/entry_types/scrolled/package/src/frontend/thirdPartyConsent/OptOutInfo.js
@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import {useConsentGiven} from './hooks';
-import {useTheme} from '../../entryState';
+import {useTheme, useContentElementConsentVendor} from '../../entryState';
 import {useI18n} from '../i18n';
 import {useContentElementAttributes} from '../useContentElementAttributes';
 import {widths} from '../layouts';
@@ -29,8 +29,12 @@ export function OptOutInfo({
   const {t} = useI18n();
   const theme = useTheme();
   const optOutUrl = theme.options.thirdPartyConsent?.optOutUrl;
+
+  const {width, contentElementId} = useContentElementAttributes();
+  const contentElementConsentVendor = useContentElementConsentVendor({contentElementId});
+
+  providerName = providerName || contentElementConsentVendor?.name;
   const [consentGiven] = useConsentGiven(providerName);
-  const {width} = useContentElementAttributes();
 
   if (!optOutUrl || !consentGiven) {
     return null;
diff --git a/entry_types/scrolled/package/src/frontend/thirdPartyConsent/registerVendors.js b/entry_types/scrolled/package/src/frontend/thirdPartyConsent/registerVendors.js
index c9456001f3..cf072c02b0 100644
--- a/entry_types/scrolled/package/src/frontend/thirdPartyConsent/registerVendors.js
+++ b/entry_types/scrolled/package/src/frontend/thirdPartyConsent/registerVendors.js
@@ -6,21 +6,22 @@ export function registerVendors({contentElementTypes, seed, consent, cookieName}
 
   cookieName = cookieName || options?.cookieName;
 
-  contentElementTypes
-    .consentVendors({
+  [
+    ...seed.config.consentVendors,
+    ...contentElementTypes.consentVendors({
       contentElements: seed.collections.contentElements,
       t(key, options) { return I18n.t(key, {...options, locale}); }
     })
-    .forEach(vendor => {
-      consent.registerVendor(vendor.name, {
-        displayName: vendor.displayName,
-        description: vendor.description,
-        paradigm: cookieName ? (vendor.paradigm || 'opt-in') : 'skip',
-        cookieName: cookieName,
-        cookieKey: options?.cookieProviderNameMapping?.[vendor.name],
-        cookieDomain: options?.cookieDomain
-      });
+  ].forEach(vendor => {
+    consent.registerVendor(vendor.name, {
+      displayName: vendor.displayName,
+      description: vendor.description,
+      paradigm: cookieName ? (vendor.paradigm || 'opt-in') : 'skip',
+      cookieName: cookieName,
+      cookieKey: options?.cookieProviderNameMapping?.[vendor.name],
+      cookieDomain: options?.cookieDomain
     });
+  });
 
   consent.closeVendorRegistration();
 }
diff --git a/entry_types/scrolled/package/src/testHelpers/normalizeSeed.js b/entry_types/scrolled/package/src/testHelpers/normalizeSeed.js
index 210fb06657..1ae070f5f3 100644
--- a/entry_types/scrolled/package/src/testHelpers/normalizeSeed.js
+++ b/entry_types/scrolled/package/src/testHelpers/normalizeSeed.js
@@ -10,6 +10,9 @@
  * @param {Object} [options.legalInfo] - imprint, copyright and privacy information of entry.
  * @param {Object} [options.themeOptions] - Options set via theme registration.
  * @param {Object} [options.themeAssets] - Paths to theme assets.
+ * @param {Object} [options.additionalSeedData] - Seed data by name.
+ * @param {Array} [options.consentVendors] - Server rendered consent vendor data.
+ * @param {Object} [options.contentElementConsentVendors] - Consent vendor name by content element id.
  * @param {Object} [options.entry] - attributes of entry.
  * @param {Array} [options.imageFiles] - Array of objects with image file attributes of entry.
  * @param {Array} [options.videoFiles] - Array of objects with video file attributes of entry.
@@ -40,7 +43,9 @@ export function normalizeSeed({
   sections,
   contentElements,
   widgets,
-  additionalSeedData
+  additionalSeedData,
+  consentVendors,
+  contentElementConsentVendors
 } = {}) {
   const entries = entry ? [entry] : [{}];
   const normalizedEntries = normalizeCollection(entries);
@@ -78,7 +83,9 @@ export function normalizeSeed({
       theme: normalizeTheme({themeOptions, themeAssets}),
       additionalSeedData: additionalSeedData || {
         frontendVersion: 1
-      }
+      },
+      consentVendors: consentVendors || [],
+      contentElementConsentVendors: contentElementConsentVendors || {}
     },
     collections: {
       entries: normalizedEntries,
diff --git a/entry_types/scrolled/spec/helpers/pageflow_scrolled/editor/entry_json_seed_helper_spec.rb b/entry_types/scrolled/spec/helpers/pageflow_scrolled/editor/entry_json_seed_helper_spec.rb
index eb44ba3446..8a74df52da 100644
--- a/entry_types/scrolled/spec/helpers/pageflow_scrolled/editor/entry_json_seed_helper_spec.rb
+++ b/entry_types/scrolled/spec/helpers/pageflow_scrolled/editor/entry_json_seed_helper_spec.rb
@@ -96,6 +96,24 @@ def render(helper, entry)
                                            }
                                          })
         end
+
+        it 'renders consent vendor host matchers' do
+          pageflow_configure do |config|
+            config.for_entry_type(PageflowScrolled.entry_type) do |entry_type_config|
+              entry_type_config.consent_vendor_host_matchers = {
+                /\.some-vendor\.com$/ => 'someVendor'
+              }
+            end
+          end
+
+          entry = create(:draft_entry, type_name: 'scrolled')
+
+          result = render(helper, entry)
+
+          expect(result).to include_json(consentVendorHostMatchers: {
+                                           '\\.some-vendor\\.com$' => 'someVendor'
+                                         })
+        end
       end
     end
   end
diff --git a/entry_types/scrolled/spec/helpers/pageflow_scrolled/entry_json_seed_helper_spec.rb b/entry_types/scrolled/spec/helpers/pageflow_scrolled/entry_json_seed_helper_spec.rb
index c0f6b6abb5..7be827c0f3 100644
--- a/entry_types/scrolled/spec/helpers/pageflow_scrolled/entry_json_seed_helper_spec.rb
+++ b/entry_types/scrolled/spec/helpers/pageflow_scrolled/entry_json_seed_helper_spec.rb
@@ -650,6 +650,79 @@ def render(helper, entry, options = {})
                                          }
                                        })
       end
+
+      context 'consent vendors' do
+        include_context 'fake translations'
+
+        it 'renders consent vendors of used content elements' do
+          translation(:de, 'pageflow_scrolled.consent_vendors.someVendor.name',
+                      'Some Vendor')
+          translation(:de, 'pageflow_scrolled.consent_vendors.someVendor.description',
+                      'Some description')
+          translation(:de, 'pageflow_scrolled.consent_vendors.someVendor.opt_in_prompt',
+                      'See content from Some Vendor?')
+
+          pageflow_configure do |config|
+            config.for_entry_type(PageflowScrolled.entry_type) do |entry_type_config|
+              entry_type_config.content_element_consent_vendors.register(
+                lambda do |configuration:, **|
+                  configuration['vendor']
+                end,
+                content_element_type_name: 'someEmbed'
+              )
+            end
+          end
+
+          entry = create(:published_entry,
+                         type_name: 'scrolled',
+                         revision_attributes: {locale: 'de'})
+          content_element = create(:content_element,
+                                   revision: entry.revision,
+                                   type_name: 'someEmbed',
+                                   configuration: {vendor: 'someVendor'})
+
+          result = render(helper, entry)
+
+          expect(result).to include_json(config: {
+                                           consentVendors: [
+                                             {
+                                               name: 'someVendor',
+                                               displayName: 'Some Vendor',
+                                               description: 'Some description',
+                                               optInPrompt: 'See content from Some Vendor?',
+                                               paradigm: 'lazy opt-in'
+                                             }
+                                           ],
+                                           contentElementConsentVendors: {
+                                             content_element.id => 'someVendor'
+                                           }
+                                         })
+        end
+
+        it 'does not render consent vendors of unused content elements' do
+          pageflow_configure do |config|
+            config.for_entry_type(PageflowScrolled.entry_type) do |entry_type_config|
+              entry_type_config.content_element_consent_vendors.register(
+                lambda do |**|
+                  'someVendor'
+                end,
+                content_element_type_name: 'someEmbed'
+              )
+            end
+          end
+
+          entry = create(:published_entry,
+                         type_name: 'scrolled',
+                         revision_attributes: {locale: 'de'})
+
+          result = render(helper, entry)
+
+          expect(result).to include_json(config: {
+                                           consentVendors: be_empty,
+                                           contentElementConsentVendors: be_empty
+                                         })
+        end
+      end
     end
 
     describe '#scrolled_entry_json_seed_script_tag' do
diff --git a/entry_types/scrolled/spec/pageflow_scrolled/content_element_consent_vendors_spec.rb b/entry_types/scrolled/spec/pageflow_scrolled/content_element_consent_vendors_spec.rb
new file mode 100644
index 0000000000..910de6ca34
--- /dev/null
+++ b/entry_types/scrolled/spec/pageflow_scrolled/content_element_consent_vendors_spec.rb
@@ -0,0 +1,74 @@
+require 'spec_helper'
+
+module PageflowScrolled
+  RSpec.describe ContentElementConsentVendors do
+    describe '#by_content_element_id' do
+      it 'returns data from registered callables' do
+        content_element_consent_vendors = ContentElementConsentVendors.new
+        content_element_consent_vendors.register(
+          ->(configuration:, **) { configuration['vendor'] },
+          content_element_type_name: 'someEmbed'
+        )
+        content_element_consent_vendors.register(
+          ->(**) { 'otherVendor' },
+          content_element_type_name: 'otherEmbed'
+        )
+
+        published_entry = create(:published_entry)
+        content_element = create(:content_element,
+                                 revision: published_entry.revision,
+                                 type_name: 'someEmbed',
+                                 configuration: {vendor: 'someVendor'})
+        other_content_element = create(:content_element,
+                                       revision: published_entry.revision,
+                                       type_name: 'otherEmbed')
+
+        result = content_element_consent_vendors.by_content_element_id(
+          published_entry
+        )
+
+        expect(result)
+          .to eq(content_element.id => 'someVendor',
+                 other_content_element.id => 'otherVendor')
+      end
+
+      it 'passes entry to callable' do
+        content_element_consent_vendors = ContentElementConsentVendors.new
+        content_element_consent_vendors.register(
+          ->(entry:, **) { entry.feature_state('some_vendor_opt_in') ? 'someVendor' : nil },
+          content_element_type_name: 'someEmbed'
+        )
+
+        published_entry = create(:published_entry, with_feature: 'some_vendor_opt_in')
+        content_element = create(:content_element,
+                                 revision: published_entry.revision,
+                                 type_name: 'someEmbed')
+
+        result = content_element_consent_vendors.by_content_element_id(
+          published_entry
+        )
+
+        expect(result).to eq(content_element.id => 'someVendor')
+      end
+
+      it 'skips content elements that return nil vendor' do
+        content_element_consent_vendors = ContentElementConsentVendors.new
+        content_element_consent_vendors.register(
+          ->(**) { nil },
+          content_element_type_name: 'someEmbed'
+        )
+
+        published_entry = create(:published_entry)
+        create(:content_element,
+               revision: published_entry.revision,
+               type_name: 'someEmbed')
+
+        result = content_element_consent_vendors.by_content_element_id(
+          published_entry
+        )
+
+        expect(result).to be_empty
+      end
+    end
+  end
+end
diff --git a/entry_types/scrolled/spec/pageflow_scrolled/plugin_spec.rb b/entry_types/scrolled/spec/pageflow_scrolled/plugin_spec.rb
index fada62a26e..14af3531c1 100644
--- a/entry_types/scrolled/spec/pageflow_scrolled/plugin_spec.rb
+++ b/entry_types/scrolled/spec/pageflow_scrolled/plugin_spec.rb
@@ -36,5 +36,71 @@ def request(uri = 'https://example.com/some-entry')
         ActionDispatch::Request.new(Rack::MockRequest.env_for(uri))
       end
     end
+
+    describe 'IFRAME_EMBED_CONSENT_VENDOR' do
+      it 'returns nil if consent not required' do
+        pageflow_configure do |config|
+          config.for_entry_type(PageflowScrolled.entry_type) do |entry_type_config|
+            entry_type_config.consent_vendor_host_matchers = {
+              /\.typeform\.com$/ => 'typeform'
+            }
+          end
+        end
+
+        result = Plugin::IFRAME_EMBED_CONSENT_VENDOR.call(
+          entry: create(:published_entry, type_name: 'scrolled'),
+          configuration: {
+            'requireConsent' => false,
+            'source' => 'https://foo.typeform.com/to/1234'
+          }
+        )
+
+        expect(result).to eq(nil)
+      end
+
+      it 'detects vendor from source when consent is required' do
+        pageflow_configure do |config|
+          config.for_entry_type(PageflowScrolled.entry_type) do |entry_type_config|
+            entry_type_config.consent_vendor_host_matchers = {
+              /\.typeform\.com$/ => 'typeform'
+            }
+          end
+        end
+
+        result = Plugin::IFRAME_EMBED_CONSENT_VENDOR.call(
+          entry: create(:published_entry, type_name: 'scrolled'),
+          configuration: {
+            'requireConsent' => true,
+            'source' => 'https://foo.typeform.com/to/1234'
+          }
+        )
+
+        expect(result).to eq('typeform')
+      end
+
+      it 'returns nil for unknown source' do
+        result = Plugin::IFRAME_EMBED_CONSENT_VENDOR.call(
+          entry: create(:published_entry, type_name: 'scrolled'),
+          configuration: {
+            'requireConsent' => true,
+            'source' => 'https://example.com'
+          }
+        )
+
+        expect(result).to eq(nil)
+      end
+
+      it 'returns nil for invalid source' do
+        result = Plugin::IFRAME_EMBED_CONSENT_VENDOR.call(
+          entry: create(:published_entry, type_name: 'scrolled'),
+          configuration: {
+            'requireConsent' => true,
+            'source' => 'this is not a uri $%&'
+          }
+        )
+
+        expect(result).to eq(nil)
+      end
+    end
   end
 end
diff --git a/package/spec/editor/views/InfoBoxView-spec.js b/package/spec/editor/views/InfoBoxView-spec.js
new file mode 100644
index 0000000000..f33d41144d
--- /dev/null
+++ b/package/spec/editor/views/InfoBoxView-spec.js
@@ -0,0 +1,31 @@
+import Backbone from 'backbone';
+
+import {InfoBoxView} from 'editor/views/InfoBoxView';
+
+describe('InfoBoxView', () => {
+  describe('with visibleBindingValue option', () => {
+    it('hides element when value of attribute does not match', () => {
+      var view = new InfoBoxView({
+        model: new Backbone.Model({hidden: true}),
+        visibleBinding: 'hidden',
+        visibleBindingValue: false
+      });
+
+      view.render();
+
+      expect(view.$el).toHaveClass('hidden_via_binding');
+    });
+
+    it('does not set hidden class when value of attribute matches', () => {
+      var view = new InfoBoxView({
+        model: new Backbone.Model({hidden: false}),
+        visibleBinding: 'hidden',
+        visibleBindingValue: false
+      });
+
+      view.render();
+
+      expect(view.$el).not.toHaveClass('hidden_via_binding');
+    });
+  });
+});
diff --git a/package/spec/ui/views/mixins/inputView-spec.js b/package/spec/ui/views/mixins/inputView-spec.js
index 28c5a1998c..44048a9dc8 100644
--- a/package/spec/ui/views/mixins/inputView-spec.js
+++ b/package/spec/ui/views/mixins/inputView-spec.js
@@ -509,7 +509,7 @@ describe('pageflow.inputView', () => {
 
       view.render();
 
-      expect(view.$el).not.toHaveClass('input-hidden_via_binding');
+      expect(view.$el).not.toHaveClass('hidden_via_binding');
     });
 
     it('sets hidden class when attribute is false', () => {
@@ -520,7 +520,7 @@ describe('pageflow.inputView', () => {
 
       view.render();
 
-      expect(view.$el).toHaveClass('input-hidden_via_binding');
+      expect(view.$el).toHaveClass('hidden_via_binding');
     });
 
     it('does not set hidden class when attribute is true', () => {
@@ -531,7 +531,7 @@ describe('pageflow.inputView', () => {
 
       view.render();
 
-      expect(view.$el).not.toHaveClass('input-hidden_via_binding');
+      expect(view.$el).not.toHaveClass('hidden_via_binding');
     });
 
     it('sets hidden class when attribute changes to false', () => {
@@ -544,7 +544,7 @@ describe('pageflow.inputView', () => {
 
       view.model.set('active', false);
 
-      expect(view.$el).toHaveClass('input-hidden_via_binding');
+      expect(view.$el).toHaveClass('hidden_via_binding');
     });
 
     it('allows overriding updateVisible method for custom behavior', () => {
@@ -583,7 +583,7 @@ describe('pageflow.inputView', () => {
 
         view.render();
 
-        expect(view.$el).toHaveClass('input-hidden_via_binding');
+        expect(view.$el).toHaveClass('hidden_via_binding');
       });
 
       it('does not set hidden class when value of attribute matches', () => {
@@ -595,7 +595,7 @@ describe('pageflow.inputView', () => {
 
         view.render();
 
-        expect(view.$el).not.toHaveClass('input-hidden_via_binding');
+        expect(view.$el).not.toHaveClass('hidden_via_binding');
       });
     });
 
@@ -609,7 +609,7 @@ describe('pageflow.inputView', () => {
 
         view.render();
 
-        expect(view.$el).toHaveClass('input-hidden_via_binding');
+        expect(view.$el).toHaveClass('hidden_via_binding');
       });
 
       it('does not set hidden class when function returns true', () => {
@@ -621,7 +621,7 @@ describe('pageflow.inputView', () => {
 
         view.render();
 
-        expect(view.$el).not.toHaveClass('input-hidden_via_binding');
+        expect(view.$el).not.toHaveClass('hidden_via_binding');
       });
 
       describe('with multiple binding attributes', () => {
@@ -648,7 +648,7 @@ describe('pageflow.inputView', () => {
           view.render();
           view.model.set('active', false);
 
-          expect(view.$el).toHaveClass('input-hidden_via_binding');
+          expect(view.$el).toHaveClass('hidden_via_binding');
         });
       });
     });
@@ -663,7 +663,7 @@ describe('pageflow.inputView', () => {
 
         view.render();
 
-        expect(view.$el).toHaveClass('input-hidden_via_binding');
+        expect(view.$el).toHaveClass('hidden_via_binding');
       });
 
       it('does not set hidden if true', () => {
@@ -675,7 +675,7 @@ describe('pageflow.inputView', () => {
 
         view.render();
 
-        expect(view.$el).not.toHaveClass('input-hidden_via_binding');
+        expect(view.$el).not.toHaveClass('hidden_via_binding');
       });
     });
   });
diff --git a/package/src/editor/views/InfoBoxView.js b/package/src/editor/views/InfoBoxView.js
index 6f01a0b843..ddaa5f4b9c 100644
--- a/package/src/editor/views/InfoBoxView.js
+++ b/package/src/editor/views/InfoBoxView.js
@@ -1,9 +1,23 @@
 import Marionette from 'backbone.marionette';
 
+import {attributeBinding} from 'pageflow/ui';
+
 export const InfoBoxView = Marionette.View.extend({
   className: 'info_box',
 
+  mixins: [attributeBinding],
+
+  initialize() {
+    this.setupBooleanAttributeBinding('visible', this.updateVisible);
+  },
+
+  updateVisible: function() {
+    this.$el.toggleClass('hidden_via_binding',
+                         this.getBooleanAttributBoundOption('visible') === false);
+  },
+
   render: function() {
+    this.$el.addClass(this.options.level)
     this.$el.html(this.options.text);
     return this;
   }
diff --git a/package/src/testHelpers/dominos/ui/ConfigurationEditorTab.js b/package/src/testHelpers/dominos/ui/ConfigurationEditorTab.js
index f5eec63f6b..e06a0bc00d 100644
--- a/package/src/testHelpers/dominos/ui/ConfigurationEditorTab.js
+++ b/package/src/testHelpers/dominos/ui/ConfigurationEditorTab.js
@@ -12,7 +12,7 @@ export const ConfigurationEditorTab = Base.extend({
   },
 
   visibleInputPropertyNames: function() {
-    return this.$el.find('.input:not(.input-hidden_via_binding)').map(function() {
+    return this.$el.find('.input:not(.hidden_via_binding)').map(function() {
       return $(this).data('inputPropertyName');
     }).get();
   },
diff --git a/package/src/ui/index.js b/package/src/ui/index.js
index e7cd73dff6..bce2a4ec47 100644
--- a/package/src/ui/index.js
+++ b/package/src/ui/index.js
@@ -53,6 +53,7 @@ export * from './views/tableCells/PresenceTableCellView';
 export * from './views/tableCells/IconTableCellView';
 export * from './views/tableCells/TextTableCellView';
 
+export * from './views/mixins/attributeBinding';
 export * from './views/mixins/inputWithPlaceholderText';
 export * from './views/mixins/subviewContainer';
 export * from './views/mixins/tooltipContainer';
diff --git a/package/src/ui/views/mixins/attributeBinding.js b/package/src/ui/views/mixins/attributeBinding.js
new file mode 100644
index 0000000000..ea9c5c0ba9
--- /dev/null
+++ b/package/src/ui/views/mixins/attributeBinding.js
@@ -0,0 +1,50 @@
+import _ from 'underscore';
+
+export const attributeBinding = {
+  setupBooleanAttributeBinding(optionName, updateMethod) {
+    this.setupAttributeBinding(optionName, updateMethod, Boolean);
+  },
+
+  getBooleanAttributBoundOption(optionName) {
+    return this.getAttributeBoundOption(optionName, Boolean);
+  },
+
+  setupAttributeBinding: function(optionName, updateMethod, normalize = value => value) {
+    const binding = this.options[`${optionName}Binding`];
+    const view = this;
+
+    if (binding) {
+      _.flatten([binding]).forEach(attribute => {
+        this.listenTo(this.model, 'change:' + attribute, update);
+      });
+    }
+
+    update();
+
+    function update() {
+      updateMethod.call(view, view.getAttributeBoundOption(optionName, normalize));
+    }
+  },
+
+  getAttributeBoundOption(optionName, normalize = value => value) {
+    const binding = this.options[`${optionName}Binding`];
+    const bindingValueOptionName = `${optionName}BindingValue`;
+
+    const value = Array.isArray(binding) ?
+                  binding.map(attribute => this.model.get(attribute)) :
+                  this.model.get(binding);
+
+    if (bindingValueOptionName in this.options) {
+      return value === this.options[bindingValueOptionName];
+    }
+    else if (typeof this.options[optionName] === 'function') {
+      return normalize(this.options[optionName](value));
+    }
+    else if (optionName in this.options) {
+      return normalize(this.options[optionName]);
+    }
+    else if (binding) {
+      return normalize(value);
+    }
+  }
+};
diff --git a/package/src/ui/views/mixins/inputView.js b/package/src/ui/views/mixins/inputView.js
index 5df3fbbe85..5e7241307c 100644
--- a/package/src/ui/views/mixins/inputView.js
+++ b/package/src/ui/views/mixins/inputView.js
@@ -1,6 +1,7 @@
 import _ from 'underscore';
 
 import {attributeTranslationKeys, findTranslation, translationKeysWithSuffix} from '../../utils/i18nUtils';
+import {attributeBinding} from './attributeBinding';
 
 /**
  * Mixin for input views handling common concerns like labels,
@@ -131,6 +132,8 @@ import {attributeTranslationKeys, findTranslation, translationKeysWithSuffix} fr
  * @mixin
  */
 export const inputView = {
+  ...attributeBinding,
+
   ui: {
     label: 'label',
     labelText: 'label .name',
@@ -262,54 +265,7 @@ export const inputView = {
   },
 
   updateVisible: function() {
-    this.$el.toggleClass('input-hidden_via_binding',
+    this.$el.toggleClass('hidden_via_binding',
                          this.getBooleanAttributBoundOption('visible') === false);
-  },
-
-  setupBooleanAttributeBinding(optionName, updateMethod) {
-    this.setupAttributeBinding(optionName, updateMethod, Boolean);
-  },
-
-  getBooleanAttributBoundOption(optionName) {
-    return this.getAttributeBoundOption(optionName, Boolean);
-  },
-
-  setupAttributeBinding: function(optionName, updateMethod, normalize = value => value) {
-    const binding = this.options[`${optionName}Binding`];
-    const view = this;
-
-    if (binding) {
-      _.flatten([binding]).forEach(attribute => {
-        this.listenTo(this.model, 'change:' + attribute, update);
-      });
-    }
-
-    update();
-
-    function update() {
-      updateMethod.call(view, view.getAttributeBoundOption(optionName, normalize));
-    }
-  },
-
-  getAttributeBoundOption(optionName, normalize = value => value) {
-    const binding = this.options[`${optionName}Binding`];
-    const bindingValueOptionName = `${optionName}BindingValue`;
-
-    const value = Array.isArray(binding) ?
-                  binding.map(attribute => this.model.get(attribute)) :
-                  this.model.get(binding);
-
-    if (bindingValueOptionName in this.options) {
-      return value === this.options[bindingValueOptionName];
-    }
-    else if (typeof this.options[optionName] === 'function') {
-      return normalize(this.options[optionName](value));
-    }
-    else if (optionName in this.options) {
-      return normalize(this.options[optionName]);
-    }
-    else if (binding) {
-      return normalize(value);
-    }
   }
 };