Embedding Widget into Anvil Application (Twitter Widget)

Anvil Q&A
1

What I’m trying to do:
I am looking to dynamically embed the Twitter Timeline widget into my Anvil application. I want this to be dynamic so that I can a) input user variables into the widget code and b) modify where the widget sits and its dimensions.

The widget I am looking to add is the twitter timeline widget. The widget code looks like this:

<a class="twitter-timeline" href="https://twitter.com/BillGates?ref_src=twsrc%5Etfw">Tweets by BillGates</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

To be clear, we would like to run this widget with the following inputs:

<a class="twitter-timeline" data-dnt="true" href="https://twitter.com/**INPUT_VARIABLE**?ref_src=twsrc%5Etfw">Tweets by **INPUT_VARIABLE** </a> <script async src=https://platform.twitter.com/widgets.js charset="utf-8"></script>

What I’ve tried and what’s not working:
I have attempted to use the Native Libraries feature to embed this widget. Although this works, it is not dynamic in either way. The native libraries code is always injected into the section of the app and I am unable/unclear on how to dynamically change the code to input a variable.

I have also tried to follow this thread to embed the widget through code. Unfortunately, I wasn’t able to get it to work (getting an error), and I’m not sure how to translate the code to include the inputs required of the Twitter Widget.

Code Sample:
Note: This attempt did not work for me, as described above.

class iFrame(iFrameTemplate):
  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)

    # Create an iframe element and set the src
    iframe = jQuery("<iframe width='100%' height='800px'>").attr("src","https://platform.twitter.com/widgets.js")
    
    # Append the iframe to a container in our form
    iframe.appendTo(get_dom_node(self.content_panel))

Clone link:
share a copy of your app

2

Would it help to wrap it in an HTML Form? That form can then be a Custom Component, which can be placed and sized as desired.

3

Hi @nvilvovsky,

I’ve created an app that wraps the Twitter Widget as a Custom Component as @p.colbert suggest. You can set the <a> tag in the self.html property of the form, then give the Custom Component a property so you can dynamically change the input.

Here is the clone link: Anvil | Login

This is the code for the Custom Component, which sets the twitter_name property:

class TwitterWidget(TwitterWidgetTemplate):
  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)

  @property
  def twitter_name(self):
      return self._twitter_name

  @twitter_name.setter
  def twitter_name(self, value):
      self._twitter_name = value
      self.html = f"""<a class="twitter-timeline" href="https://twitter.com/{value}?ref_src=twsrc%5Etfw">Tweets by {value}</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8">

And the twitter_name property can be added in the Custom Component Configuration modal so that the property can be set from the designer:

Screenshot 2022-09-09 at 11.02.21
Screenshot 2022-09-09 at 11.02.21699×819 57.3 KB

3 Likes
4

How would I push a variable through the TwitterWidget?

I have set up my form with a text box and a button, with code like so:

def button_click(self, **event_args):
    """This method is called when the button is clicked"""
    t_handle = self.twitter_handle_input.text

And I added the Twitter Widget custom component underneath. As it stands, when I launch the app, the widget loads after a few seconds no matter what I do. I’d like users to input text to the box, press the button, and then for the t_handle variable to be pushed as the twitter_name property into the widget, THEN for the widget to load. The two currently seem to be unconnected.

5

The app I sent is just a minimal example with the Widget added in the designer, so it loads when the page loads. You can instead add it via code and pass in the text from the TextBox. This way, you can control when the Widget is actually instantiated and added to the page.

The documentation on Custom Components might be helpful: Anvil Docs | Custom Components