1. First, you need to get an app_id from the Opengraph.io website. You can sign up for a free account and create a new app. You will get an app_id that you can use to make API calls. You can also check your usage and manage your settings from the dashboard.
2. Next, you need to install the Opengraph.io plugin from the Bubble plugin store. You can search for it by name or by category (Data Sources). You can also find it from this link. Once you install it, you will see it in your list of installed plugins in your Bubble editor.

3. Then, you need to configure the data source in your app. You can use the plugin as a data source for any element that can display dynamic data, such as text, image, repeating group, etc. You just need to select the element and choose “Get data from an external API” as the data source. Then you can select the Opengraph.io plugin and enter the URL of the website you want to scrape. You can also enter your app_id if you want to use a custom one. You will see a list of fields that you can display, such as title, description, image, product_name, product_price, etc. You can choose any field that suits your needs and display it in your element.

4. Finally, if you want to take a screenshot of the website and display it in your app, you need to set up an action in the workflows. You can use the plugin action “Site Screenshot” and enter the URL of the website. You will get a screenshot_url as a result, which you can use to display the screenshot in an image element or save it to your database.