{"id":4360,"date":"2024-04-15T02:34:37","date_gmt":"2024-04-14T18:34:37","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=4360"},"modified":"2024-04-15T02:34:37","modified_gmt":"2024-04-14T18:34:37","slug":"insert-an-eventbrite-order-processing-on-your-webflow-website","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/insert-an-eventbrite-order-processing-on-your-webflow-website\/","title":{"rendered":"Insert an Eventbrite order processing on your Webflow website"},"content":{"rendered":"\n
\n
Important:<\/strong> This guide makes use of Webflow\u2019s integration feature to insert custom code. The integration feature is accessible on any paid Site plan and on Core, Growth, Agency, and Freelancer Workspace plans.\u00a0<\/h6>\n

In this tutorial, you will discover:\u00a0<\/p>\n

    \n
  1. The method to retrieve your integration code from Eventbrite<\/li>\n
  2. How to integrate an interactive Eventbrite order processing on your Webflow website<\/li>\n<\/ol>\n

    Obtaining your integration code from Eventbrite<\/h2>\n

    Prior to beginning:<\/strong> If not done yet, establish an Eventbrite event<\/a>. Also, make sure to generate a Collection in the Webflow CMS where you can save and adjust your event IDs.<\/h6>\n

    To acquire your event ID and integration code from Eventbrite:\u00a0<\/p>\n

      \n
    1. Visit your events<\/a>\u00a0<\/li>\n
    2. Select the event that you want to embed an order processing widget for<\/li>\n
    3. Navigate to the Marketing<\/strong> menu > Embedded order processing<\/strong><\/li>\n
    4. Choose the Order processing appearance<\/strong> you prefer for your website (e.g., a button that shows a modal window over the page, or a button integrated within the content on the page)<\/li>\n
    5. Click on Copy code<\/strong> to copy your integration code<\/li>\n<\/ol>\n

      Integrating an interactive Eventbrite order processing on your Webflow website<\/h2>\n

      You have the option to take the integration code from Eventbrite and paste it into an integration element anywhere on your website \u2014 however, the embedded order processing will remain static (i.e., not change), therefore, you will need to manually update the integration code each time you wish to embed an order processing for a different event. This approach might be suitable if you only intend to embed an Eventbrite order processing for a single event, but not if you handle multiple events.<\/p>\n

      Here, you will learn how to integrate an interactive Eventbrite order processing on your site. By utilizing the Webflow CMS and dynamic integrations, you can design an order processing layout that recurs for all the events in your CMS Collection.\u00a0<\/p>\n

      This will be broken down into 3 steps:\u00a0<\/p>\n

        \n
      1. Establish a Collection field for your event IDs\u00a0<\/li>\n
      2. Set up a dynamic integration\u00a0<\/li>\n
      3. Include your event ID to your event in the CMS<\/li>\n<\/ol>\n
        Important: <\/strong>Ensure that you have set up a CMS Collection (e.g., \u201cEvents,\u201d \u201cMeet-ups,\u201d etc.) and created at least 1 event Collection item for your event. The CMS even provides an Events template to guide you in configuring your Collection.<\/h6>\n

        Establish a Collection field for your event IDs\u00a0<\/h3>\n

        Initially, you must establish a CMS Collection field to save your Eventbrite event IDs (i.e., the distinct identifier for the Eventbrite integration):\u00a0<\/p>\n

          \n
        1. Open the CMS panel<\/strong><\/li>\n
        2. Hover over your Events Collection and tap on the settings \u201ccog<\/strong>\u201d icon that appears\u00a0<\/li>\n
        3. Select Add new field<\/strong><\/li>\n
        4. Opt for Plain text<\/strong><\/li>\n
        5. Assign a label to your field (e.g., \u201cEventbrite event ID\u201d)\u00a0<\/li>\n
        6. Click on Save field<\/strong><\/li>\n<\/ol>\n

          Set up a dynamic integration<\/h3>\n

          Dynamic integrations only function with dynamic content, implying that you can only attach them on Collection pages or within a Collection list on a static page. Since you are referencing your Events Collection, you will need to link your integration to the Collection page associated with your Events Collection, or connect a Collection list to your Events Collection.\u00a0<\/p>\n

          To set up your dynamic integration:<\/p>\n

            \n
          1. Proceed to the Add panel<\/strong> > Advanced<\/strong><\/li>\n
          2. Insert an integration<\/strong> element to the canvas<\/li>\n
          3. Paste your Eventbrite integration code in the code editor<\/li>\n
          4. Locate the eventId<\/strong> in the integration code and select the ID number between the single quotation marks (e.g., 681294671627)\u00a0<\/li>\n
          5. Copy the ID number and keep it highlighted<\/li>\n
          6. Tap on Add field<\/strong><\/li>\n
          7. Choose the Collection field you created for your event ID (e.g., \u201cEventbrite event ID\u201d)<\/li>\n
          8. Select Save & close\u00a0<\/strong><\/li>\n<\/ol>\n

            \u200d<\/p>\n

            \n
            \"Eventbrite<\/div>
            Highlight your event ID to replace it with a dynamic Collection field.\u00a0<\/em><\/figcaption><\/figure>\n
            \n
            \"Eventbrite<\/div>
            When the static event ID\u00a0is replaced with a Collection field, the Eventbrite integration updates for each event in the Collection.\u00a0<\/em><\/figcaption><\/figure>\n

            Include your event ID to your event in the CMS\u00a0<\/h3>\n

            Lastly, incorporate your event ID to your event:\u00a0<\/p>\n

              \n
            1. Access the CMS panel<\/strong> > Events Collection <\/strong>(or any chosen name for your Collection)\u00a0<\/li>\n
            2. Select your event Collection item\u00a0<\/li>\n
            3. Paste the ID number from the integration code (e.g., 681294671627) into the Collection field you designated for your event ID (e.g., \u201cEventbrite event ID\u201d)<\/li>\n
            4. Click on Save<\/strong><\/li>\n<\/ol>\n

              You can follow these steps for any events where you desire to include an interactive order processing \u2014 copy the ID from the Eventbrite integration code and add it to your event ID Collection field in each Collection item.\u00a0<\/p>\n

              Once prepared, publish your website to experience your newly integrated Eventbrite order processing in operation.\u00a0<\/p>\n

              Professional hint: <\/strong>You can apply conditional visibility on Collection pages and within Collection lists to conceal the integrated order processing for events lacking an event ID.\u00a0<\/h6>\n
              Important:<\/strong> Your Eventbrite order processing won\u2019t display on the Designer canvas \u2014 that is, you won\u2019t be able to preview the processing in the Designer, and a placeholder will show instead. After publishing or exporting your website, the processing will be visible (i.e., shown) where you positioned it. If you need to preview the processing before launching your website on a custom domain, you can publish your site to the webflow.io staging subdomain.\u00a0<\/h6>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Let your site visitors register for your events with an embedded Eventbrite checkout.","protected":false},"author":2,"featured_media":5244,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[296],"tags":[],"class_list":{"0":"post-4360","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-integrations","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4360","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=4360"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4360\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5155"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=4360"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=4360"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=4360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}